Детали пользовательского интерфейса элемента + сводка

Element

Полмесяца после школы. Бизнес компании также менее понятен, и в этот период не так много задач, организация работы не очень идеальна.

Прежде всего, я хотел бы поблагодарить своего руководителя группы за помощь в решении многих проблем. Это также руководитель группы, который привел меня в этот день, еще раз спасибо.

Компания делает приложения для iPad, когда я начинал, проект был уже наполовину разработан, и технология использовала vue+element UI.

Как уже было сказано ранее, эффекты реализованы, и эти функции оттачивались почти полмесяца.Я никогда раньше не касался UI элементов, думал, что это вопрос копирования и вставки, но это не так, и их еще много детали, которые необходимо сделать. Испытайте это на себе.

В проекте встречаются следующие проблемы. Вот резюме, я считаю, что это резюме будет полезно.

вопрос:

При использовании всплывающего окна dailog элемента пользовательского интерфейса всплывающее окно не находится в приложении, смонтированном vue, и пользовательский стиль не может переопределить стиль по умолчанию.

решить:

Пользовательский стиль прописывается в глобале и оборачивается родительским элементом, стиль вступает в силу.

вопрос:

Обратитесь к всплывающему диалоговому окну в пользовательском интерфейсе элемента, Dom внутри будет загружен, когда появится всплывающее окно, js уже начал выполняться до Dom и не может получать и управлять элементами Dom.

решить:

  1. Не используйте UI элемента для перехода к диалоговому окну, рукописным html элементам и исправлению структуры Dom, чтобы сначала загружался Dom, а затем выполнялся элемент операции js.

  2. Во всплывающем окне журнала раскопок пользовательского интерфейса элемента используется обратный вызов open.После динамического создания Dom выполняется метод в open.Метод в open выполняется немедленно.

  3. Вместо того, чтобы писать js в родительском компоненте, вы можете отделить его как дочерний компонент, Нажмите на всплывающее окно, чтобы напрямую загрузить дочерний компонент, и проблем с выполнением не будет.

вопрос:

элемент ui добавляет валидацию в форму и добавляет ее в тег el-col

решить:

  1. Сначала добавьте :model, :rules ко всей большой форме, которая требует проверки формы.
  2. Затем добавьте пакет тега el-form-item в поле ввода, которое необходимо проверить, и добавьте реквизит
  3. Затем добавьте правила rules в данные vue, а правила — это определенные реквизиты.
  4. Затем напишите логику в методах (при нажатии кнопки «Отправить», вызовите выполнение метода) this.$refs['inHosForm'].validate((valid) будет судить, заполнена ли форма в соответствии с реквизитом
 1. <el-form ref="inHosForm" label-width="80px" label-position="left" class="form" :model="inHosData" :rules="rules">
 
 // :model 是定义v-model表单可输入的字段，:rules 是验证规则
 2. <el-col :span="12" class="collabel">
               <el-form-item label="可靠程度" prop="reliable">
                <el-input size="mini" class="inputWidth1" placeholder="请填写" v-if="!previewMode" v-model="inHosData.reliable"></el-input>
              </el-form-item>
              <span v-if="previewMode">{{inHosData.reliable}}</span>
</el-col>

 3. data () {
    return {
      rules: {
        reliable: [
          { required: true, message: '请输入可靠程度', trigger: 'blur' }
          // required为小红星标，意思是必填项
          //message为表单未填时出来的提示红字
          //trigger是element ui 里 的方法，输入框时用 blur ，isSlect多选框时用到change
        ],
    methods：{
 4. saveMedical () {
      // $refs['这里的一定是：model中定义的']
      this.$refs['inHosForm'].validate((valid) => {
        if (valid) {}  // valid  表单未填写为false，填写为true
        }
}
    }

вопрос:

Для всплывающего диалогового окна в пользовательском интерфейсе элемента, когда содержимого слишком много, требуется полоса прокрутки. В глобальном масштабе добавьте overflow: hidden в настройку .el-dialog__body. Полоса прокрутки не будет отображаться, а скрытый контент не может отображаться.

решить:

Всплывающее диалоговое окно в пользовательском интерфейсе элемента, когда содержимого слишком много, глобально установите для overflow:auto значение .el-dialog__body;

вопрос:

Некоторые стили по умолчанию в пользовательском интерфейсе элементов не очень хороши. Вам нужно определить некоторые стили самостоятельно. Самостоятельное определение стилей не может охватывать исходные стили.

решить:

Определяйте стили в тегах, пишите встроенные стили

<el-col :span=24 style="margin:20px"></el-col>

вопрос:

el-botton в элементе ui, когда он отключен, установите атрибут disabled, он не работает при установке

<el-button :disabled="false">默认按钮</el-button>

решить:

disabled принимает логические значения, не ставьте кавычки после =

 <el-button :disabled=false>默认按钮</el-button>

другие проблемы:

вопрос:

Положение рисования холста неточное, отклоняющееся от нормального положения, base64 не может быть преобразовано в изображение img в обычном режиме, это указывает на текущий экземпляр холста, а не на экземпляр vue, вам нужно изменить эту точку и убедиться, что она указывает на экземпляр холста перед

решить:

Извлеките холст и инкапсулируйте его как компонент, вводите вызовы компонентов и не подвергайтесь воздействию

вопрос:

Обнаружено, что функция проверки формы выполнена не на 100%, и она неисправна.После заполнения формы на текущей странице ее невозможно провести.Обнаружено, что это указывает на экземпляр vue и должно указывать на экземпляр swiper. В настоящее время соответствующий экземпляр swiper не подключен.

Вам нужно изменить эту точку и убедиться, что предыдущая точка указывает на экземпляр vue.

решить:

Прочтите документацию по API swiper.

Проблема: base64 конвертируется в образ, это не может указывать на проблему с img

решить:

Преобразуйте base64 в изображение, это указывает на конструктор и не может указывать на экземпляр vue, преобразуйте это, определите переменную let that = this, преобразуйте это и завершите функцию онлайн-подписи.

Суммировать:

1. Всплывающее диалоговое окно элемента пользовательского интерфейса не должно быть написано в метке, а должно быть написано в корневом элементе, а не в оболочке, можно сослаться на следующую структуру

            </el-col>
          </el-row>
            <el-dialog
            title="签名"
            :visible.sync="centerDialogVisible"
            width="85%"
            center>
            <sign @draw_save="getSignImg"></sign>
          </el-dialog>
        </div>

2. Если вы хотите щелкнуть элемент, чтобы появилось диалоговое окно, добавьте событие щелчка (), предоставленное элементом, к элементу, а затем определение в диалоговом окне (:visible.sync) также должно быть согласованным.

3. Перед введением компонента код js пишется в родительском компоненте, потому что при появлении всплывающего диалогового окна будет загружен dom во всплывающем окне, и js будет выполняться немедленно. не идеально использовать предоставляемый им открытый метод. Код js всегда выполняется на один шаг раньше, чем dom. Я также поместил его в таймер, чтобы js выполнялся медленно, а затем очистка таймера снова становится проблемой, поэтому я дал разработал этот метод записи и представил его как компонент.

4. Если элемент привязан к событию щелчка, предоставленному элементом, и вы хотите связать другое событие щелчка, напишите предоставленный метод в своем собственном методе.

<div class="canva" @click="isShow">

methods：{
    isShow（）{
        this.centerDialogVisible = true
        //...
    }
}

5. Передайте параметры в фоновый режим, используйте значение, чтобы принять значение, которое будет передано

6. Данные, возвращаемые res.data в фоновом режиме, могут быть обработаны циклом forEach, а данные могут быть настроены и обработаны в соответствии с полями.

API.diseaseByTod(params).then((res) => {
this.isSerthe = []
res.data.forEach(item => {
this.isSerthe.push({
chapter: item.fields.icd_code,
chapter_icd: item.fields.icd_code,
illness_name: item.fields.illness,
level: 4
})
})
console.log(res.data)
})

Когда массиву необходимо хранить данные нескольких интерфейсов, а данные в массиве необходимо использовать в четырех местах, вы можете сначала просмотреть данные в цикле, а затем передать объект в соответствии с полем, настроить данные в объекте, а затем зациклить следующее нажатие данных интерфейса. Прежде чем очистить исходный массив и определить пустой массив для хранения данных интерфейса.

Параметры, передаваемые в фон, каждый раз являются значением isSlect.chapter.

<li v-for="(isSlect,index) in isSerthe" :key="index" class="lilists" @click="diseaseByCod(isSlect.chapter,isSlect.level)">
    <span class="fontSize">{{isSlect.chapter_icd}}</span><span class="fontSizes">{{isSlect.illness_name}}<span class="el-icon-arrow-right" v-if="isShow"></span>
    <input type="checkbox" v-if="isShaow" name="1" value="isSlect" class="radio"/>
    </span>
</li>

Цикл li отображает данные четырех интерфейсов, реализует переключение уровней и сокращает объем кода.

diseaseCoding () {
      API.diseaseCoding().then((res) => {
        this.isShaow = false
        this.isShow = true
        this.isSerthe = []
        res.data.forEach(item => {
          this.isSerthe.push({
            chapter: item.fields.chapter,
            chapter_icd: item.fields.chapter_range,
            illness_name: item.fields.illnessname,
            level: 1
          })
        })
        console.log(this.isSerthe)
      })
    },
    
    diseaseByCod (value, number) {
      if (number === 1) {
        this.isShaow = false
        this.isShow = true
        this.centerDialogVisible = true

        let params = {
          chapter: value
        }
        API.diseaseByCod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.chapter_range,
              chapter_icd: item.fields.chapter_range,
              illness_name: item.fields.illnessname,
              level: 2
            })
             console.log(item.fields.chapter_range)
          })
          console.log(res.data)
        })
      } else if (number === 2) {
        this.isShaow = false
        this.isShow = true
        let params = {
          chapter_range: value
        }
        API.diseaseByDod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.icd_code,
              chapter_icd: item.fields.icd_code,
              illness_name: item.fields.illness,
              level: 3
            })
          })
          console.log(res.data)
        })
      } else if (number === 3) {
        this.isShaow = true
        this.isShow = false
        let params = {
          icd_code: value
        }
        console.log(value)
        API.diseaseByTod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.icd_code,
              chapter_icd: item.fields.icd_code,
              illness_name: item.fields.illness,
              level: 4
            })
          })
          console.log(res.data)
        })
      }
    }

Предварительный просмотр в сети в консоли браузера для просмотра полных данных в фоновом режиме, а в заголовке запроса Headers проверьте, передаются ли параметры в фоновый режим.

Устранение неполадок: анализировать ошибки, просматривать сообщения об ошибках, проверять, воспроизводить проблемы и удалять

console.log(_) alert(...) В методе отладки отладчика предупреждение используется, чтобы увидеть, выполняется ли оно, порядок выполнения кода, синхронный и асинхронный процесс выполнения, выполнялся ли js при загрузке элемент Dom, и переменная не может получить значение.. .

Нет необходимости писать шаг за шагом, чтобы увидеть эффект от одного шага. Просто напишите строчку кода и посмотрите на эффект, у вас в сердце должна появиться картина, каким будет следующий эффект. Таким образом, эффективность не будет медленной, и она не будет соответствовать ожиданиям других людей.

Что ж, вышесказанное подводит итог проблемам, возникшим в проекте.

Я тоже считаю, что шаг за шагом ровный и неуклонный, и успехи будут.Никто ни из чего не выйдет, это только вопрос времени.

Продолжение следует. . .

Категории