wl-design-mobile 0.8.19 → 0.8.21

package/edit/select/lambo-edit-date-time.vue

@@ -1,122 +1,122 @@
-<template>
-  <div>
-    <div class="edit-box" @click="changeColor">
-      <div class="edit-left-box">
-        <div class="edit-left-top">
-          <div v-if="required" class="edit-red-icon">
-            <lambo-required-red-star :required="required"></lambo-required-red-star>
-          </div>
-          <div class="edit-title">{{ title }}</div>
-        </div>
-        <van-field v-model="valName" :placeholder="placeholder" :readonly="true" class="edit-lambo-input" clear-trigger="focus"></van-field>
-      </div>
-      <div v-if="icon" class="edit-right-icon">
-        <lambo-vector-icon :icon="icon"></lambo-vector-icon>
-      </div>
-    </div>
-    <div>
-      <van-popup v-model="showBottom" position="bottom" :style="{ maxHeight: '33%' }">
-        <van-datetime-picker v-model="curDateTime" :type="type" title="选择时间" @confirm="onConfirm" @cancel="onCancelTime"/>
-      </van-popup>
-    </div>
-  </div>
-</template>
-<script>
-import LamboVectorIcon from '../../icon/lambo-vector-icon.vue'
-import LamboRequiredRedStar from '../../icon/lambo-required-red-star.vue'
-import moment from "moment/moment";
-
-export default {
-  name: 'LamboEditDateTime',
-  components: {LamboRequiredRedStar, LamboVectorIcon},
-  props: {
-    icon: {
-      type: String,
-      default: "timeicon.png",
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: '请选择',
-    },
-    type: {
-      type: String,
-      default: 'datetime',
-    },
-    defaultDate: {
-      type: Date,
-      default: () => null
-    },
-  },
-  data() {
-    return {
-      valName: '',
-      showBottom: false,
-      selectItem: {
-        dateStr: '',
-        dateFormat: ''
-      },
-      curDateTime: null
-    }
-  },
-  methods: {
-    changeColor() {
-      this.showBottom = !this.showBottom
-      let searchRows = document.querySelectorAll('.edit-box')
-      Array.from(searchRows).forEach(function (row, index) {
-        row.addEventListener('click', function () {
-          Array.from(searchRows).forEach(function (row) {
-            row.style.borderBottom = '1px solid var(--scl-white-2)'
-          })
-          row.style.borderBottom = '1px solid var(--scl-blue)'
-        })
-      })
-    },
-    onConfirm(time) {
-      console.log(" onConfirm time:", time)
-      let dateStr = '';
-      let dateFormat = '';
-      if (this.type === 'time') {
-        let formattedTime = moment(time, 'HH:mm').format("HHmm");
-        dateStr = formattedTime || '';
-        dateFormat = time || '';
-      } else {
-        dateStr = moment(time).format("YYYYMMDDHHmmss") || ''
-        dateFormat = moment(time).format("YYYY-MM-DD HH:mm:ss") || ''
-      }
-      this.valName = dateFormat
-      this.selectItem.dateStr = dateStr
-      this.selectItem.dateFormat = dateFormat
-      this.$emit("on-ok", this.selectItem)
-      this.showBottom = false
-    },
-    onCancelTime() {
-      this.showBottom = false;
-    },
-    initDefaultVal() {
-      if (this.defaultDate) {
-        this.curDateTime = this.defaultDate
-        this.onConfirm(this.defaultDate)
-      }
-    }
-  },
-  created() {
-    this.initDefaultVal()
-  }
-}
-</script>
-<style scoped>
-@import "../../styles/index.less";
-@import "./styles/css/index.css";
-
-/deep/ .edit-left-box .van-cell {
-  padding: 0px 0px;
-}
-</style>
+<template>
+  <div>
+    <div class="edit-box" @click="changeColor">
+      <div class="edit-left-box">
+        <div class="edit-left-top">
+          <div v-if="required" class="edit-red-icon">
+            <lambo-required-red-star :required="required"></lambo-required-red-star>
+          </div>
+          <div class="edit-title">{{ title }}</div>
+        </div>
+        <van-field v-model="valName" :placeholder="placeholder" :readonly="true" class="edit-lambo-input" clear-trigger="focus"></van-field>
+      </div>
+      <div v-if="icon" class="edit-right-icon">
+        <lambo-vector-icon :icon="icon"></lambo-vector-icon>
+      </div>
+    </div>
+    <div>
+      <van-popup v-model="showBottom" position="bottom" :style="{ maxHeight: '33%' }">
+        <van-datetime-picker v-model="curDateTime" :type="type" title="选择时间" @confirm="onConfirm" @cancel="onCancelTime"/>
+      </van-popup>
+    </div>
+  </div>
+</template>
+<script>
+import LamboVectorIcon from '../../icon/lambo-vector-icon.vue'
+import LamboRequiredRedStar from '../../icon/lambo-required-red-star.vue'
+import moment from "moment/moment";
+
+export default {
+  name: 'LamboEditDateTime',
+  components: {LamboRequiredRedStar, LamboVectorIcon},
+  props: {
+    icon: {
+      type: String,
+      default: "timeicon.png",
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '请选择',
+    },
+    type: {
+      type: String,
+      default: 'datetime',
+    },
+    defaultDate: {
+      type: Date,
+      default: () => null
+    },
+  },
+  data() {
+    return {
+      valName: '',
+      showBottom: false,
+      selectItem: {
+        dateStr: '',
+        dateFormat: ''
+      },
+      curDateTime: null
+    }
+  },
+  methods: {
+    changeColor() {
+      this.showBottom = !this.showBottom
+      let searchRows = document.querySelectorAll('.edit-box')
+      Array.from(searchRows).forEach(function (row, index) {
+        row.addEventListener('click', function () {
+          Array.from(searchRows).forEach(function (row) {
+            row.style.borderBottom = '1px solid var(--scl-white-2)'
+          })
+          row.style.borderBottom = '1px solid var(--scl-blue)'
+        })
+      })
+    },
+    onConfirm(time) {
+      console.log(" onConfirm time:", time)
+      let dateStr = '';
+      let dateFormat = '';
+      if (this.type === 'time') {
+        let formattedTime = moment(time, 'HH:mm').format("HHmm");
+        dateStr = formattedTime || '';
+        dateFormat = time || '';
+      } else {
+        dateStr = moment(time).format("YYYYMMDDHHmmss") || ''
+        dateFormat = moment(time).format("YYYY-MM-DD HH:mm:ss") || ''
+      }
+      this.valName = dateFormat
+      this.selectItem.dateStr = dateStr
+      this.selectItem.dateFormat = dateFormat
+      this.$emit("on-ok", this.selectItem)
+      this.showBottom = false
+    },
+    onCancelTime() {
+      this.showBottom = false;
+    },
+    initDefaultVal() {
+      if (this.defaultDate) {
+        this.curDateTime = this.defaultDate
+        this.onConfirm(this.defaultDate)
+      }
+    }
+  },
+  created() {
+    this.initDefaultVal()
+  }
+}
+</script>
+<style scoped>
+@import "../../styles/index.less";
+@import "./styles/css/index.css";
+
+/deep/ .edit-left-box .van-cell {
+  padding: 0px 0px;
+}
+</style>

package/edit/select/lambo-edit-date.vue

@@ -1,120 +1,120 @@
-<template>
-  <div>
-    <div class="edit-box" @click="changeColor">
-      <div class="edit-left-box">
-        <div class="edit-left-top">
-          <div v-if="required" class="edit-red-icon">
-            <lambo-required-red-star :required="required"></lambo-required-red-star>
-          </div>
-          <div class="edit-title">{{ title }}</div>
-        </div>
-        <van-field v-model="valName" :placeholder="placeholder" :readonly="true"
-                   class="edit-lambo-input" clear-trigger="focus"></van-field>
-      </div>
-      <div v-if="icon" class="edit-right-icon">
-        <lambo-vector-icon :icon="icon"></lambo-vector-icon>
-      </div>
-    </div>
-    <div>
-      <van-calendar v-model:show="showBottom" :default-date="defaultDate" :max-date="maxDate" :min-date="minDate"
-                    :style="{ maxHeight: '65%' }" color="#0070D2" type="single" @confirm="onConfirm" :allow-same-day="allowSameDay"/>
-    </div>
-  </div>
-</template>
-<script>
-import LamboVectorIcon from '../../icon/lambo-vector-icon.vue'
-import LamboRequiredRedStar from '../../icon/lambo-required-red-star.vue'
-import moment from "moment/moment";
-
-export default {
-  name: 'LamboEditDate',
-  components: {LamboRequiredRedStar, LamboVectorIcon},
-  props: {
-    icon: {
-      type: String,
-      default: "date.png",
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    title: {
-      type: String,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: '请选择',
-    },
-    defaultDate: {
-      type: Date,
-      default: () => null
-    },
-    minDate: {
-      type: Date,
-      default: () => moment().subtract(3, 'years').toDate(),
-    },
-    maxDate: {
-      type: Date,
-      default: () => moment().add(3, 'years').toDate(),
-    },
-    allowSameDay: {
-      type: Boolean,
-      default: false
-    },
-  },
-  data() {
-    return {
-      valName: '',
-      showBottom: false,
-      selectItem: {
-        dateStr: '',
-        dateFormat: ''
-      },
-    }
-  },
-  methods: {
-    changeColor() {
-      this.showBottom = !this.showBottom
-      let searchRows = document.querySelectorAll('.edit-box')
-      Array.from(searchRows).forEach(function (row, index) {
-        row.addEventListener('click', function () {
-          Array.from(searchRows).forEach(function (row) {
-            row.style.borderBottom = '1px solid var(--scl-white-2)'
-          })
-          row.style.borderBottom = '1px solid var(--scl-blue)'
-        })
-      })
-    },
-    onConfirm(time) {
-      console.log(" onConfirm time:", time)
-      let dateStr = moment(time).format("yyyyMMDD") || ''
-      let dateFormat = moment(time).format("yyyy-MM-DD") || ''
-      this.valName = dateFormat
-      this.selectItem.dateStr = dateStr
-      this.selectItem.dateFormat = dateFormat
-      this.$emit("on-ok", this.selectItem)
-      this.showBottom = false
-    },
-    initDefaultVal() {
-      // 默认值处理
-      if (this.defaultDate) {
-        this.onConfirm(this.defaultDate)
-      }
-    }
-  },
-  created() {
-    this.initDefaultVal()
-  },
-  mounted() {
-  }
-}
-</script>
-<style scoped>
-@import "../../styles/index.less";
-@import "./styles/css/index.css";
-
-/deep/ .edit-left-box .van-cell {
-  padding: 0px 0px;
-}
-</style>
+<template>
+  <div>
+    <div class="edit-box" @click="changeColor">
+      <div class="edit-left-box">
+        <div class="edit-left-top">
+          <div v-if="required" class="edit-red-icon">
+            <lambo-required-red-star :required="required"></lambo-required-red-star>
+          </div>
+          <div class="edit-title">{{ title }}</div>
+        </div>
+        <van-field v-model="valName" :placeholder="placeholder" :readonly="true"
+                   class="edit-lambo-input" clear-trigger="focus"></van-field>
+      </div>
+      <div v-if="icon" class="edit-right-icon">
+        <lambo-vector-icon :icon="icon"></lambo-vector-icon>
+      </div>
+    </div>
+    <div>
+      <van-calendar v-model:show="showBottom" :default-date="defaultDate" :max-date="maxDate" :min-date="minDate"
+                    :style="{ maxHeight: '65%' }" color="#0070D2" type="single" @confirm="onConfirm" :allow-same-day="allowSameDay"/>
+    </div>
+  </div>
+</template>
+<script>
+import LamboVectorIcon from '../../icon/lambo-vector-icon.vue'
+import LamboRequiredRedStar from '../../icon/lambo-required-red-star.vue'
+import moment from "moment/moment";
+
+export default {
+  name: 'LamboEditDate',
+  components: {LamboRequiredRedStar, LamboVectorIcon},
+  props: {
+    icon: {
+      type: String,
+      default: "date.png",
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: '请选择',
+    },
+    defaultDate: {
+      type: Date,
+      default: () => null
+    },
+    minDate: {
+      type: Date,
+      default: () => moment().subtract(3, 'years').toDate(),
+    },
+    maxDate: {
+      type: Date,
+      default: () => moment().add(3, 'years').toDate(),
+    },
+    allowSameDay: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      valName: '',
+      showBottom: false,
+      selectItem: {
+        dateStr: '',
+        dateFormat: ''
+      },
+    }
+  },
+  methods: {
+    changeColor() {
+      this.showBottom = !this.showBottom
+      let searchRows = document.querySelectorAll('.edit-box')
+      Array.from(searchRows).forEach(function (row, index) {
+        row.addEventListener('click', function () {
+          Array.from(searchRows).forEach(function (row) {
+            row.style.borderBottom = '1px solid var(--scl-white-2)'
+          })
+          row.style.borderBottom = '1px solid var(--scl-blue)'
+        })
+      })
+    },
+    onConfirm(time) {
+      console.log(" onConfirm time:", time)
+      let dateStr = moment(time).format("yyyyMMDD") || ''
+      let dateFormat = moment(time).format("yyyy-MM-DD") || ''
+      this.valName = dateFormat
+      this.selectItem.dateStr = dateStr
+      this.selectItem.dateFormat = dateFormat
+      this.$emit("on-ok", this.selectItem)
+      this.showBottom = false
+    },
+    initDefaultVal() {
+      // 默认值处理
+      if (this.defaultDate) {
+        this.onConfirm(this.defaultDate)
+      }
+    }
+  },
+  created() {
+    this.initDefaultVal()
+  },
+  mounted() {
+  }
+}
+</script>
+<style scoped>
+@import "../../styles/index.less";
+@import "./styles/css/index.css";
+
+/deep/ .edit-left-box .van-cell {
+  padding: 0px 0px;
+}
+</style>

package/edit/select/lambo-edit-input-textarea.vue

@@ -1,91 +1,91 @@
-<template>
-  <div class="edit-box" @click="changeColor">
-    <div class="edit-left-box">
-      <div v-if="title" class="edit-left-top">
-        <div v-if="required" class="edit-red-icon">
-          <lambo-required-red-star :required="required"></lambo-required-red-star>
-        </div>
-        <div class="edit-title">{{ title }}</div>
-      </div>
-      <van-field v-model="innerValue" :autosize="true" :clearable="true" :maxlength="maxlength"
-                 :placeholder="placeholder" :type="type" class="edit-lambo-input-textarea" label="" v-bind="$attrs" @input="$emit('input', $event)"/>
-    </div>
-    <div v-if="icon" class="edit-right-icon">
-      <lambo-vector-icon :icon="icon"></lambo-vector-icon>
-    </div>
-  </div>
-</template>
-<script>
-import redIcon from '../../assets/icon/required.png'
-import LamboRequiredRedStar from '../../icon/lambo-required-red-star.vue'
-import LamboVectorIcon from "../../icon/lambo-vector-icon.vue"
-
-export default {
-  name: 'LamboEditInputTextarea',
-  components: {LamboVectorIcon, LamboRequiredRedStar},
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
-  props: {
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    type: {
-      default: 'textarea',
-    },
-    maxlength: {
-      type: [String, Number],
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-    value: {
-      type: String,
-      default: '',
-    },
-    icon: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      requiredReadIcon: redIcon,
-      innerValue: this.value
-    }
-  },
-  methods: {
-    changeColor() {
-      let searchRows = document.querySelectorAll('.edit-box')
-      Array.from(searchRows).forEach(function (row, index) {
-        row.addEventListener('click', function () {
-          Array.from(searchRows).forEach(function (row) {
-            row.style.borderBottom = '1px solid var(--scl-white-2)'
-          })
-          row.style.borderBottom = '1px solid var(--scl-blue)'
-        })
-      })
-    },
-  },
-  watch: {
-    value(newVal) {
-      this.innerValue = newVal
-    },
-  }
-}
-</script>
-<style scoped>
-@import "../../styles/index.less";
-@import "./styles/css/index.css";
-
-/deep/ .edit-left-box .van-cell {
-  padding: 0px 0px;
-}
-</style>
+<template>
+  <div class="edit-box" @click="changeColor">
+    <div class="edit-left-box">
+      <div v-if="title" class="edit-left-top">
+        <div v-if="required" class="edit-red-icon">
+          <lambo-required-red-star :required="required"></lambo-required-red-star>
+        </div>
+        <div class="edit-title">{{ title }}</div>
+      </div>
+      <van-field v-model="innerValue" :autosize="true" :clearable="true" :maxlength="maxlength"
+                 :placeholder="placeholder" :type="type" class="edit-lambo-input-textarea" label="" v-bind="$attrs" @input="$emit('input', $event)"/>
+    </div>
+    <div v-if="icon" class="edit-right-icon">
+      <lambo-vector-icon :icon="icon"></lambo-vector-icon>
+    </div>
+  </div>
+</template>
+<script>
+import redIcon from '../../assets/icon/required.png'
+import LamboRequiredRedStar from '../../icon/lambo-required-red-star.vue'
+import LamboVectorIcon from "../../icon/lambo-vector-icon.vue"
+
+export default {
+  name: 'LamboEditInputTextarea',
+  components: {LamboVectorIcon, LamboRequiredRedStar},
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+  props: {
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      default: 'textarea',
+    },
+    maxlength: {
+      type: [String, Number],
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      requiredReadIcon: redIcon,
+      innerValue: this.value
+    }
+  },
+  methods: {
+    changeColor() {
+      let searchRows = document.querySelectorAll('.edit-box')
+      Array.from(searchRows).forEach(function (row, index) {
+        row.addEventListener('click', function () {
+          Array.from(searchRows).forEach(function (row) {
+            row.style.borderBottom = '1px solid var(--scl-white-2)'
+          })
+          row.style.borderBottom = '1px solid var(--scl-blue)'
+        })
+      })
+    },
+  },
+  watch: {
+    value(newVal) {
+      this.innerValue = newVal
+    },
+  }
+}
+</script>
+<style scoped>
+@import "../../styles/index.less";
+@import "./styles/css/index.css";
+
+/deep/ .edit-left-box .van-cell {
+  padding: 0px 0px;
+}
+</style>