gxd-uni-library-editx 1.0.0

package/src/components/XdSearchBar/XdSearchBar.vue

@@ -0,0 +1,286 @@
+<template>
+  <view class="xd-navbar" :style="{height: getBoxHeight+'rpx'}">
+    <view class="xd-navbar-fixed" :style="{background: uiBgColor}">
+      <!-- 状态栏 -->
+      <view :style="{height:(statusBarHeight) +'rpx'}"></view>
+      <!-- 导航栏内容 -->
+      <view
+        class="xd-navbar-content"
+        :style="{
+          height:navBarHeight+'rpx',
+          width:windowWidth+'px',
+          paddingRight: isBack? '30rpx': '20rpx'
+        }"
+      >
+        <view v-if="isBack" class="xd-navbar-content__icons" @click.stop="back">
+          <xd-font-icon :size="40*$isIpadCC" icon="iconxiazai6" :color="uiBackIconColor"></xd-font-icon>
+        </view>
+        <view class="xd-navbar-content__search">
+          <input
+            :style="{
+              borderColor: uiInputBorderColor,
+              borderRadius: inputBorderRadius,
+              height: navBarHeight * isH5Num + 'rpx',
+              lineHeight: navBarHeight * isH5Num + 'rpx',
+              fontSize: ($isIpadCC * 30) + 'rpx',
+              background: inputBackground,
+              paddingRight:  isSearch? ((140*$isIpadCC) + 'rpx'): ((30*$isIpadCC) + 'rpx'),
+              paddingLeft:  60*$isIpadCC + 'rpx',
+              borderRadius: 20* $isIpadCC + 'rpx'
+            }"
+            class="app-input"
+            :focus="false"
+            @confirm="doneInput"
+            type="text"
+            confirm-type="search"
+            :adjust-position="false"
+            @input="onInput"
+            :placeholder="placeholder"
+            v-model="searchValue"/>
+          <xd-font-icon color="#9b9b9b" :size="34*$isIpadCC" icon="iconsousuo"></xd-font-icon>
+          <button
+            :style="{
+              height: navBarHeight * isH5Num + 'rpx',
+              lineHeight: navBarHeight * isH5Num + 'rpx',
+              background: $mainColor,
+              color: '#fff',
+              fontSize: ($isIpadCC * 30) + 'rpx',
+              borderRadius: 20* $isIpadCC + 'rpx',
+              width: 128* $isIpadCC + 'rpx'
+            }"
+            @click="onSearch"
+          >搜索</button>
+        </view>
+      </view>
+    </view>
+    <view :style="{height: getBoxHeight+'rpx'}"></view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdButton from "@/components/XdButton/XdButton";
+
+  /**
+   * XdSearchBar 全局UI
+   * @description 自定义header tabbar功能
+   * @tutorial
+   * @property {Boolean}  isBack            开启返回按钮功能并启动返回操作事件  （可选） 默认：false
+   * @property {String}   backIconColor     返回图标显示颜色值                （可选） 默认：使用主色调 $mainColor
+   * @property {Boolean}  isSearch          显示搜索按钮                     （可选）  默认：false
+   * @property {String}   placeholder       设置placeholder文本              （可选）  默认：搜索
+   * @property {String}   bg                设置tabbar背景颜色主             （可选）  默认：为页面主色调 $mainColor
+   * @property {String}   inputBorderColor  输入框边框颜色                   （可选）   默认：为页面主色调 $mainColor
+   * @property {String}   inputBorderRadius 输入框边框圆角设置                （可选）   默认：30rpx
+   * @property {String}   inputBackground   输入框背景颜色                    （可选）   默认 #fff
+   *
+   * @slot   接受默认插槽
+   *
+   * @event {Function} click或者tap         按钮点击事件e
+   */
+
+  export default {
+    name: "XdSearchBar",
+    components: {XdFontIcon, XdButton},
+    props: {
+      value: {
+        type: [String, Number],
+        default: ''
+      },
+      isBack: {
+        type: Boolean,
+        default: false
+      },
+      backIconColor: {
+        type: String,
+        default: '',
+      },
+      isSearch: {
+        type: Boolean,
+        default: false
+      },
+      placeholder: {
+        type: String,
+        default: '搜索',
+      },
+      bg : {
+        type: String,
+        default: '',
+      },
+      inputBorderColor: {
+        type: String,
+        default: '',
+      },
+      inputBorderRadius: {
+        type: String,
+        default: '30rpx',
+      },
+      inputBackground: {
+        type: String,
+        default: '#fff',
+      }
+    },
+    data() {
+      return {
+        statusBarHeight: 20, //rpx
+        navBarHeight: 90, //H5的默认值 rpx
+        windowWidth: 375, //页面宽度px
+        searchValue: '', //搜索值
+        uiBgColor: '', //插件背景颜色
+        uiColor: '', //插件文本颜色
+        uiBackIconColor:'', //返回按钮颜色
+        uiInputBorderColor: '', //输入框边框颜色
+        inputTimeer: null, //无搜索按钮时候输入事件延时处理
+        isH5Num: 0.8
+      };
+    },
+    computed:{
+      getBoxHeight() {
+        return (this.statusBarHeight + this.navBarHeight);
+      },
+    },
+    watch: {
+      value(newVal) {
+        this.searchValue = newVal
+      }
+    },
+    created() {
+      this.uiBgColor = this.$mainColor;
+      this.uiBackIconColor = '#fff';
+      this.uiInputBorderColor = this.$mainColor;
+      if(this.bg) {
+        this.uiBgColor = this.bg;
+      }
+
+      //#ifdef H5
+      this.isH5Num = 0.7;
+      // #endif
+
+      if(this.backIconColor) {
+        this.uiBackIconColor = this.backIconColor;
+      }
+
+      if (this.inputBorderColor) {
+        this.uiInputBorderColor = this.inputBorderColor;
+      }
+
+      this.setNavBar();
+      uni.onWindowResize((res) => {
+        this.setNavBar();
+      });
+
+      this.searchValue = this.value;
+
+    },
+    methods: {
+      setNavBar(){
+        // 获取手机系统信息
+        const info = getApp().globalData.$systemInfo
+        // 设置状态栏高度
+        this.statusBarHeight = info.statusBarHeight * this.$pxNum;
+        this.windowWidth = info.windowWidth
+        // h5 app mp-alipay
+        // #ifndef H5 || APP-PLUS || MP-ALIPAY
+        // 获取胶囊的位置
+        const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+        // (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
+        this.navBarHeight = ((menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)) * this.$pxNum
+        this.windowWidth = menuButtonInfo.left
+        // #endif
+      },
+      back() {
+        this.$emit('back');
+      },
+
+
+      doneInput() {
+        uni.hideKeyboard()
+      },
+
+      /**
+       * @description 输入事件
+       */
+      onInput(e) {
+        //有搜索按钮不启动输入事件
+        if(this.isSearch) return;
+        if(this.inputTimeer) {
+          clearTimeout(this.inputTimeer);
+          this.inputTimeer = null;
+        }
+        //延时处理逻辑
+        this.inputTimeer = setTimeout(()=>{
+          this.searchValue = e.target.value.trim();
+          this.$emit('onSearch', this.searchValue);
+          this.$emit('input', this.searchValue)
+          console.log(this.searchValue);
+        },700);
+      },
+
+      onSearch(){
+        console.log(this.searchValue.trim())
+        this.$emit('onSearch', this.searchValue.trim());
+        this.$emit('input', this.searchValue.trim())
+      },
+    }
+  }
+</script>
+
+<style lang="less">
+  .xd-navbar {
+    &-fixed {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 99;
+      width: 100%;
+      background-color: @xd-base-color;
+    }
+
+    &-content {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      padding: 0 unit(30, rpx) 0 unit(20, rpx);
+      height: unit(90, rpx);
+      box-sizing: border-box;
+
+
+      &__icons {
+        margin-right: unit(20, rpx);
+      }
+
+      &__search {
+        position: relative;
+        flex: 1;
+
+        /deep/ .xd-iconfont {
+          position: absolute;
+          left: unit(16, rpx);
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        button {
+          position: absolute;
+          right: unit(0, rpx);
+          top: unit(0, rpx);
+          padding: 0;
+
+          &:hover {
+            opacity: 0.85;
+          }
+        }
+
+        .app-input {
+          background-color: @xd-text-color-inverse;
+          border-width: unit(2, rpx);
+          border-style: solid;
+          box-sizing: border-box;
+        }
+
+      }
+
+    }
+
+  }
+</style>

package/src/components/XdSelect/XdSelect.vue

@@ -0,0 +1,382 @@
+<template>
+  <view class="xd-select" :style="{width: width}">
+    <picker
+      class="xd-select__picker "
+      @change="bindPickerChange"
+      :range="flimTypeList"
+      :mode="mode"
+      :value="flimTypeIndex"
+      :disabled="disabled"
+      @cancel="bindPickerClick(false)"
+    >
+      <view
+        class="xd-select__box"
+        :class="{'xd-select__disabled': disabled}"
+        :style="{height: uiHeight + 'rpx'}"
+      >
+        <view v-if="label">{{label}}</view>
+        <view
+          :style="{
+            border: borderWidth + 'rpx solid ' + (!disabled ? uiColor : '#eee'),
+            color: getColor ? '#999': textColor,
+            background: disabled ? '#f4f4f4' : '#fff',
+            borderRadius: radius,
+            height: uiHeight + 'rpx',
+            lineHeight: uiHeight + 'rpx',
+            'box-sizing': 'border-box',
+            padding: padding,
+            fontSize: uiFontSize + 'rpx',
+            justifyContent: justifyContent,
+            width: width
+          }"
+
+          @click="bindPickerClick(true)"
+        >
+          <text
+            :style="{
+              'max-height': uiHeight + 'rpx',
+              'margin': margin
+            }"
+          >{{getSelectName}}
+          </text>
+          <view>
+            <slot :status="isUp">
+              <xd-font-icon
+                size="15"
+                :icon="isUp ? 'iconrepository-xialaxuanxiangup': 'iconrepository-xialaxuanxiangdown'"
+              ></xd-font-icon>
+            </slot>
+
+          </view>
+        </view>
+      </view>
+    </picker>
+  </view>
+</template>
+
+<script>
+
+  /**
+   * XdSelect 全局Ui, 不支持异步数据
+   * @description 自定义选择插件
+   * @property textColor {String} 文字颜色 默认：
+   * @property justifyContent {String} 文字对齐方式 默认：flex-start  其值：flex-start，flex-end ,space-between
+   * @property fontSize {Number} 文字大小 默认：28rpx
+   * @property borderWidth {Number|String}  边框大小 默认： 1rpx
+   * @property padding {String} 显示内容区域填充 默认: 0 20rpx
+   * @property height {Number|String}  插件高度 默认：默认: 60rpx
+   * @property width {String} 插件宽度 默认：默认: auto
+   * @property defaultValue {Number}  选中的默认值 默认：第一项
+   * @property list {Array|Object}  选项卡数据列表  null=>使用默认数据
+   * @property disabled {Boolean}  是否禁用  默认：false
+   * @property contentPrefix {Boolean}  文字内容后缀  默认：-
+   * @property mode {String}  模式类型  默认：selector 其值：multiSelector，selector
+   * @property label {String}  选择框名称  默认：空，不显示
+   * @property placeholder {String}  提示文案  默认：空，不显示
+   * @property radius {String}  显示圆角  默认：25rpx
+   * @property borderColor {String}  显示圆角  默认：''
+   *
+   * @event {Function} change    点击元宝事件
+   */
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+
+  export default {
+    name: "XdSelect",
+    components: {XdFontIcon},
+    props: {
+      textColor: {
+        type: String,
+        default: '#333'
+      },
+      width: {
+        type: String,
+        default: 'auto'
+      },
+      justifyContent: {
+        type: String,
+        default: 'flex-start' //
+      },
+      fontSize: {
+        type: String | Number,
+        default: 28
+      },
+      padding: {
+        type: String,
+        default: '0 20rpx'
+      },
+      borderWidth: {
+        type: String | Number,
+        default: ''
+      },
+      height: {
+        type: String | Number,
+        default: ''
+      },
+      defaultValue: {
+        type: String | Number | null | Array,
+        default: null
+      },
+      list: {
+        type: Array | null,
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      contentPrefix: {
+        type: String,
+        default: '-'
+      },
+      mode: {
+        type: String,
+        default: 'selector', //multiSelector selector
+      },
+      label: {
+        type: String,
+        default: ''
+      },
+      placeholder: {
+        type: String,
+        default: ''
+      },
+      radius: {
+        type: String,
+        default: '30rpx'
+      },
+      borderColor: {
+        type: String,
+        default: ''
+      },
+      margin: {
+        type: String,
+        default: ''
+      }
+
+    },
+    data() {
+      return {
+        uiHeight: 60,
+        isUp: false,
+        flimTypeIndex: null, //选择ID
+        flimTypeList: [], //选项列表
+        flimTypeListSource: [], //原始数据
+
+        //下拉菜单icon
+        iconArray: [
+          {up: 'iconrepository-xialaxuanxiangup', down: 'iconrepository-xialaxuanxiangdown'},
+          {up: '', down: ''},
+        ],
+
+        defaultFormot: [ //测试数据
+          {value: 1, label: '2D'},
+          {value: 2, label: '3D'},
+          {value: 3, label: '3DMAX'},
+          {value: 4, label: 'AA'}
+        ],
+
+        uiColor: '',
+        uiFontSize: 28,
+      }
+    },
+
+    computed: {
+      getSelectName() {
+        if (this.flimTypeIndex === null || this.flimTypeIndex.length === 0) {
+          return this.placeholder;
+        }
+        if (this.mode === 'selector') {
+          return this.flimTypeList[this.flimTypeIndex];
+        }
+
+        if (this.mode === 'multiSelector') {
+          let select = [];
+          this.flimTypeIndex.map((item, index) => {
+            select.push(this.flimTypeList[index][item]);
+          });
+          return select.join(this.contentPrefix);
+        }
+
+      },
+
+      getColor() {
+        if (this.disabled || this.flimTypeIndex === null || this.flimTypeIndex.length === 0) return true;
+        if (this.mode === 'selector') return !this.flimTypeListSource[this.flimTypeIndex];
+        return false;
+      },
+    },
+
+    watch: {
+      defaultValue() {
+        if (this.mode === 'selector') this.init(this.list);
+        if (this.mode === 'multiSelector') this.multiInit(this.list)
+      },
+      list(value) {
+        if (this.mode === 'selector') this.init(value);
+        if (this.mode === 'multiSelector') this.multiInit(value)
+      }
+    },
+
+    created() {
+      console.log('flimTypeList', this.mode)
+      this.uiColor = this.$mainColor;
+      this.uiFontSize = this.fontSize;
+      if (this.borderColor) this.uiColor = this.borderColor;
+
+      //字号
+      if (this.$xdUniHelper.checkVarType(this.fontSize) === 'string') {
+        this.uiFontSize = Number(this.fontSize);
+      }
+
+
+      if (this.height) {
+        this.uiHeight = this.height;
+        if (this.$xdUniHelper.checkVarType(this.height) === 'string') {
+          this.uiHeight = Number(this.height);
+        }
+      }
+
+      //使用测试数据
+      if (this.list === null) {
+
+        if (this.mode === 'selector') this.init(this.defaultFormot);
+        if (this.mode === 'multiSelector') this.multiInit([this.defaultFormot, this.defaultFormot])
+      }
+      //使用正式数据
+      else if (this.$xdUniHelper.checkVarType(this.list) === 'array') {
+        if (this.mode === 'selector') this.init(this.list);
+        if (this.mode === 'multiSelector') this.multiInit(this.list)
+
+      } else {
+        throw new Error('数据格式错误')
+      }
+    },
+
+    methods: {
+      init(list = []) {
+        let flimTypeList = [];
+        let select = null;
+        list.map((item, index) => {
+          if (this.defaultValue !== null && (
+            item.label === this.defaultValue ||
+            item.value === this.defaultValue)
+          ) {
+            select = item;
+            this.flimTypeIndex = index
+          }
+          flimTypeList.push(item.label);
+        });
+        this.flimTypeList = flimTypeList;
+        this.flimTypeListSource = this.$xdUniHelper.cloneDeep(list);
+
+        //已经有选中值
+        if (select && !this.disabled) {
+          this.$emit('input', select);
+          this.$emit('change', {item: select, index: this.flimTypeIndex});
+        }
+      },
+
+      multiInit(list) {
+        let defaultValue = this.defaultValue;
+        if (this.$xdUniHelper.checkVarType(this.defaultValue) !== 'array') {
+          defaultValue = [];
+        }
+        let selectIndex = [];
+        let flimTypeList = [];
+        list.map((item, index) => {
+          let tempitem = [];
+          item.map((it, idx) => {
+            let value = defaultValue[index];
+            if (value) {
+              if (value === it.label || value === it.value) {
+                selectIndex.push(idx);
+              }
+            }
+            tempitem.push(it.label);
+          })
+          flimTypeList.push(tempitem);
+        });
+        console.log(selectIndex);
+        this.flimTypeIndex = selectIndex;
+        this.flimTypeList = flimTypeList;
+
+        this.flimTypeListSource = this.$xdUniHelper.cloneDeep(list);
+
+        //已经有选中值
+        if (!this.disabled && this.flimTypeIndex.length > 0) {
+          let select = [];
+          this.flimTypeIndex.map((item, index) => {
+            select.push(this.flimTypeListSource[index][item]);
+          });
+          this.$emit('input', select);
+          this.$emit('change', {item: select, index: this.flimTypeIndex})
+        }
+      },
+
+      bindPickerChange(e) {
+
+        this.isUp = false;
+        if (e['detail']['value'] === this.flimTypeIndex) return;
+        this.flimTypeIndex = e['detail']['value'];
+
+        if (this.mode === 'selector') {
+          if (!this.flimTypeListSource[this.flimTypeIndex]) return;
+          this.$emit('input', this.flimTypeListSource[this.flimTypeIndex]);
+          this.$emit('change', {item: this.flimTypeListSource[this.flimTypeIndex], index: this.flimTypeIndex})
+        }
+
+        if (this.mode === 'multiSelector') {
+          let select = [];
+          this.flimTypeIndex.map((item, index) => {
+            select.push(this.flimTypeListSource[index][item]);
+          });
+          this.$emit('input', select);
+          this.$emit('change', {item: select, index: this.flimTypeIndex})
+        }
+
+      },
+
+
+      bindPickerClick(type) {
+        if (!this.disabled) this.isUp = type;
+      },
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-select {
+    &__picker {
+      z-index: 500;
+    }
+
+    &__box {
+      font-size: @xd-font-size-base + 2;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+
+      & > view:first-child {
+
+      }
+
+      & > view:last-child {
+        flex: 1;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        & > text {
+          .uni-max-cut(1, 60)
+        }
+      }
+
+    }
+
+    &__disabled {
+
+    }
+  }
+</style>