gxd-uni-library-editx 1.0.0

package/src/dome/dome/form.vue

@@ -0,0 +1,312 @@
+<template>
+  <xd-layout
+    title="自定义表单"
+    background="#fff"
+    :show-bar="showBar"
+    :show-footer="false"
+    @back="back"
+    @done="handleDone"
+  >
+    <view class="app-body" v-if="top!==null">
+      <view class="app-body__form">
+        <xd-form
+          ref="form"
+          :rules="rules"
+          :modelValue="form"
+          label-width="170"
+          :border="true"
+          err-show-type="modal"
+          label-align="left"
+        >
+          <xd-form-item label="姓名"
+            required
+            name="name"
+          >
+            <xd-form-input
+              v-model="form.name"
+              placeholder="请输入姓名"
+            ></xd-form-input>
+          </xd-form-item>
+          <xd-form-item label="密码">
+            <xd-form-input
+              type="password"
+              v-model="form.password"
+              placeholder="请输入密码"
+            ></xd-form-input>
+          </xd-form-item>
+          <xd-form-item label="昵称"
+            required
+            name="nickname"
+          >
+            <xd-form-input
+              v-model="form.nickname"
+              placeholder="请输入昵称"
+            ></xd-form-input>
+          </xd-form-item>
+          <xd-form-item label="选择"
+            required
+            name="select"
+          >
+            <xd-form-select
+              v-model="form.select"
+              @input="setValue('select',form.select)"
+            ></xd-form-select>
+          </xd-form-item>
+          <xd-form-item label="自我介绍"
+            required
+            name="desc"
+          >
+            <xd-form-input
+              v-model="form.desc"
+              type="textarea"
+              placeholder="请输入自我介绍"
+            ></xd-form-input>
+          </xd-form-item>
+          <xd-form-item label="性别"
+            required
+            name="sex"
+          >
+            <xd-form-checkbox
+              v-model="form.sex"
+              :localdata="sexs"
+            ></xd-form-checkbox>
+          </xd-form-item>
+          <xd-form-item label="兴趣爱好"
+            required
+            name="hobby"
+          >
+            <xd-form-checkbox
+              v-model="form.hobby"
+              multiple
+              :localdata="hobbys"
+              @change="handleHobbyChange"
+            ></xd-form-checkbox>
+          </xd-form-item>
+          <xd-form-item label="Switch"
+            required
+            name="best"
+          >
+            <xd-switch
+              size="mini"
+              class="xd-switch"
+              v-model="form.best"
+              @input="setValue('best',form.best)"
+              :checked="false"
+            ></xd-switch>
+          </xd-form-item>
+          <xd-form-item label="日期选择"
+            required
+            name="date"
+          >
+            <xd-form-date
+              :default-value="1645064000000"
+              v-model="form.date"
+              :show-hour-and-minute="true"
+              :show-second="true"
+            ></xd-form-date>
+          </xd-form-item>
+          <xd-form-item>
+            <xd-button type="primary" @click="handleClick">提交</xd-button>
+          </xd-form-item>
+        </xd-form>
+      </view>
+    </view>
+  </xd-layout>
+</template>
+
+<script>
+  import XdLayout from "@/components/XdLayout/XdLayout";
+  import XdForm from "@/components/XdForm/XdForm";
+  import XdFormItem from "@/components/XdFormItem/XdFormItem";
+  import XdFormInput from "@/components/XdFormInput/XdFormInput";
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdSelect from "@/components/XdSelect/XdSelect";
+  import XdFormSelect from "@/components/XdFormSelect/XdFormSelect";
+  import XdFormCheckbox from "@/components/XdFormCheckbox/XdFormCheckbox";
+  import XdSwitch from "@/components/XdSwitch/XdSwitch";
+  import XdFormDate from "@/components/XdFormDate";
+
+  export default {
+    name: "AppCity",
+    components: {
+      XdFormDate,
+      XdSwitch,
+      XdFormCheckbox,
+      XdFormSelect,
+      XdSelect,
+      XdButton,
+      XdFormInput,
+      XdFormItem,
+      XdForm,
+      XdLayout,
+    },
+    data() {
+      return {
+        top: null,
+        showBar: false,
+        form: {
+          name: '111',
+          nickname: '111',
+          select: '',
+          desc: '1212121',
+          sex: 1,
+          hobby: '',
+          best: false,
+          date: ''
+        },
+        rules: {
+          name: {
+            rules: [{
+              required: true,
+              errorMessage: '姓名不能为空'
+            }]
+          },
+          desc: {
+            rules: [{
+              required: true,
+              errorMessage: '请输入自我介绍'
+            }]
+          },
+          nickname: {
+            rules: [{
+              required: true,
+              errorMessage: '用户昵称不能为空'
+            }]
+          },
+          select: {
+            rules: [{
+              required: true,
+              errorMessage: '请选择'
+            }]
+          },
+          sex: {
+            rules: [{
+              required: true,
+              errorMessage: '年龄不能为空'
+            }]
+          },
+          hobby: {
+            rules: [
+              {required: true, format: 'array', errorMessage: '请至少勾选两个兴趣爱好'},
+              {
+                validateFunction: function (rule, value, data, callback) {
+                  if (value.length < 2) {
+                    callback('请至少勾选两个兴趣爱好')
+                  }
+                  return true
+                }
+              }
+            ]
+          },
+          best: {
+            rules: [{
+              required: true,
+              errorMessage: '年龄不能为空'
+            }]
+          },
+          date: {
+            rules: [{
+              required: true,
+              errorMessage: '请选择时间'
+            }]
+          },
+        },
+        // 单选数据源
+        sexs: [
+          {
+            text: '男',
+            value: 0
+          }, {
+            text: '女',
+            value: 1
+          }, {
+            text: '保密',
+            value: 2
+          }
+        ],
+        // 多选数据源
+        hobbys: [
+          {
+            text: '跑步',
+            value: 0
+          }, {
+            text: '游泳',
+            value: 1
+          }, {
+            text: '绘画',
+            value: 2
+          }, {
+            text: '足球',
+            value: 3
+          }, {
+            text: '篮球',
+            value: 4
+          }, {
+            text: '其他',
+            value: 5
+          }
+        ],
+      }
+    },
+
+    created(){
+      // #ifndef H5
+      this.showBar = true;
+      // #endif
+      // #ifdef H5
+      this.showBar = false
+      // #endif
+    },
+
+    methods: {
+      back(){
+        this.$xdUniHelper.navigateBack()
+      },
+
+      setValue(name, value) {
+        // 设置表单某项对应得值来触发表单校验
+        // 接受两个参数，第一个参数为表单域的 name ，第二个参数为表单域的值
+        this.$refs.form.setValue(name, value)
+      },
+
+      handleHobbyChange(detail){
+        console.log('detail', detail)
+      },
+
+      handleClick(){
+        this.$refs['form'].validate()
+          .then(res=>{
+            console.log(res, this.form)
+          })
+          .catch(error=>{
+            console.error(error)
+          })
+      },
+
+
+      handleDone({top, ...res}){
+        console.log('handleDone',res)
+        this.top = top;
+      },
+
+    }
+  }
+</script>
+
+<style lang="less">
+  .app-body  {
+    padding: 0 unit(0, rpx);
+    margin: 0;
+
+
+    &__form {
+      box-sizing: border-box;
+      padding: unit(20,rpx) 0;
+    }
+
+    & .xd-switch {
+      padding-top: unit(16,rpx);
+    }
+  }
+
+</style>

package/src/dome/dome/icon.js

@@ -0,0 +1,125 @@
+/**
+ * @description css - 样式名称
+ * @author coder
+ */
+export default [
+'iconbianji-01'
+, 'iconshanchu-01'
+, 'iconhuaduo-02'
+, 'iconhuaduo-01'
+, 'iconfire-01'
+, 'iconicon_fire-02'
+, 'icongouwuche-01'
+, 'iconxuanzuodingdan-01'
+, 'iconxiaoxizhongxin-01'
+, 'icondianzidingdan-quanbu-01'
+, 'icondianzidingdan-yiquxiao-01'
+, 'iconxuanzuodingdan-yiwancheng-01'
+, 'iconxuanzuodingdan-quanbu-01'
+, 'iconxuanzuodingdan-yiquxiao-01'
+, 'icondianzidingdan-yiwancheng-01'
+, 'icondianzimadingdan-01'
+, 'iconzaixiankefu-01-01'
+, 'iconyouhuiquan'
+, 'iconzhegeqiutianyoudiantian-01'
+, 'iconyuechi'
+, 'iconsaoma'
+, 'iconpiaotuan'
+, 'iconchazhaoyonghu'
+, 'iconlianxifangshi'
+, 'iconyanjing'
+, 'iconzhifubiaoti-01'
+, 'iconhuodong'
+, 'iconxia_down'
+, 'iconshang_up'
+, 'iconmeiriqiandao-01'
+, 'icondianhuatubiao'
+, 'icondizhitubiao'
+, 'iconshoujitubiao'
+, 'iconlianxirentubiao'
+, 'iconxingmingtubiao'
+, 'iconmingchengtubiao'
+, 'iconrenshutubiao'
+, 'iconlaheiicon'
+, 'iconhuodongtubiao'
+, 'icondingdanwancheng'
+, 'iconshijian'
+, 'icongerenzhongxinchufabaocuo'
+, 'iconsanjiao'
+, 'iconxiangce-01'
+, 'iconweixin-01'
+, 'iconpiaoju-01'
+, 'iconqianbao-01'
+, 'icondui-01-copy'
+, 'iconkaquan'
+, 'iconxuanzeyuanbaoshuliang'
+, 'iconsangedian-x'
+, 'iconsangedian-y'
+, 'iconchakan'
+, 'iconbiyan'
+, 'iconVIPhuiyuanjihuomakaitong'
+, 'iconVIPhuiyuantequankaitong'
+, 'iconrili'
+, 'iconloading-xian'
+, 'iconduigou-xian'
+, 'iconicon-dd-dj-01'
+, 'iconicon-wd-dj1'
+, 'iconqianxianxinxi_mian'
+, 'iconicon-wd-mr'
+, 'iconicon-dd-mr'
+, 'iconicon-weixuanzhong'
+, 'iconhi'
+, 'iconsjx'
+, 'iconsjs'
+, 'iconicon-zyk-dj'
+, 'iconicon-xuanzhong'
+, 'icontzjd'
+, 'iconwx'
+, 'iconicon-zyk-mr'
+, 'iconksjd'
+, 'icontuanpiao'
+, 'iconfuwuxieyi_mian'
+, 'iconkefu_mian'
+, 'iconyijianfankui_mian'
+, 'iconshezhi_mian'
+, 'iconjubao_mian'
+, 'iconzeouyixiang_mian'
+, 'icondongtai_mian'
+, 'iconshangchuanzhaopian_mian'
+, 'iconzhenshi_mian'
+, 'iconanquan_mian'
+, 'iconsousuo_mian'
+, 'iconshaixuanbiaoji_mian'
+, 'iconshengji_mian'
+, 'icondianyingyuehui_mian'
+, 'iconVIPtubiao_mian'
+, 'icondanchuangguanbi_xian'
+, 'iconguanbi_xian'
+, 'iconhuanyiju_xian'
+, 'iconmeilizhi_mian'
+, 'iconnan_xian'
+, 'iconnv_xian'
+, 'iconshangchuantupian_mian'
+, 'iconxiangyou_xian'
+, 'iconxiangzuo_xian'
+, 'iconVIPbiaoqian_mian'
+, 'iconyuanbao_mian'
+, 'iconyuehuibiaoqian_mian'
+, 'iconshaixuan_mian'
+, 'iconshenfenrenzheng_mian'
+, 'iconqicherenzheng_mian'
+, 'iconfangwurenzheng_mian'
+, 'icongonghuirenzheng_xian'
+, 'iconwode_mian'
+, 'iconzhaohu_mian'
+, 'iconxiaoxi_mian'
+, 'iconshouye_mian'
+, 'icondianying_mian'
+, 'iconxiangqin_mian'
+, 'iconzhankai_xian'
+, 'iconliwu_xian'
+, 'iconzan_mian'
+, 'iconpinglun_mian'
+, 'iconxin_mian'
+, 'iconxin_xian'
+]

package/src/dome/dome/icon.vue

@@ -0,0 +1,93 @@
+<template>
+  <xd-layout
+    title="我的图标"
+    background="#f8f8f8"
+    :show-bar="true"
+    :show-back="true"
+    @back="back"
+  >
+    <view class="app-body">
+      <view v-for="(item,index) in icon" :key="index">
+        <xd-font-icon :icon="item" size="50" height="80"></xd-font-icon>
+        <view>{{item}}</view>
+        <view @click="handleCopy(item)">复制</view>
+      </view>
+    </view>
+  </xd-layout>
+</template>
+
+<script>
+import icon from "@/dome/dome/icon";
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdLayout from "@/components/XdLayout/XdLayout";
+export default {
+  name: "icon",
+  components: {
+    XdFontIcon,
+    XdLayout
+  },
+  data(){
+    return {
+      icon
+    }
+  },
+  methods: {
+    back() {
+      this.$xdUniHelper.navigateBack()
+    },
+
+    handleCopy(cssName){
+      // #ifdef H5
+      this.$copyText(cssName).then(
+        res => {
+          uni.showToast({
+            title: '复制成功'
+          })
+        }
+      )
+      // #endif
+      // #ifndef H5
+      uni.setClipboardData({
+        data: cssName,
+        success: () => {
+          uni.showToast({
+            title: '复制成功'
+          })
+        }
+      })
+      // #endif
+    }
+
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .app-body {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+
+
+    & > view {
+      width: 50%;
+      border: 1px solid #efefef;
+      box-sizing: border-box;
+      padding: unit(10, rpx) 0;
+
+      &>view:nth-child(2) {
+        font-size: unit(20, rpx);
+        text-align: center;
+        .uni-break-word()
+      }
+
+      &>view:last-child {
+        font-size: unit(20, rpx);
+        text-align: center;
+        color: green;
+        padding-top: unit(10, rpx);
+      }
+    }
+  }
+</style>