shared-components/examples/src/App.vue

<template>
  <div id="app" class="demo-container">
    <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">

      <!-- 按钮组件示例 -->
      <section class="demo-section">
        <h2>页面提示框集合</h2>
        <PromptText text='这是一个提示框' :type="1" />
        <PromptText text='这是一个提示框' :type="2" />
        <PromptText text='这是一个提示框' :type="3" />
        <PromptText text="前期准备事项" :type="1" class="beforeNotice">
          <template #next_desc>
            <p class="flex">
              <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex"
                target="_blank">
                <img src="~@assets/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
            </p>
          </template>
          <template #desc>
            <p class="mt12 flex">
              1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex"
                target="_blank">
                <img src="~@assets/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
            </p>
            <p class="mt10 flex">
              2. <a href="https://dianjing.e.360.cn/ocpc/list" class="flex" target="_blank">
                <img src="~@assets/form_linkActive.svg" alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。
            </p>
          </template>
        </PromptText>
      </section>
      <section class="demo-section">
        <h2>按钮组件集合</h2>
        <div class="ele-item">
          <label for="">按钮尺寸：</label>
          <GuipButton size="superBig">加盟并进入后台</GuipButton>
          <GuipButton size="big">准备完毕，验证自有域名</GuipButton>
          <GuipButton size="page">下一步</GuipButton>
          <GuipButton size="primary">保存</GuipButton>
          <GuipButton size="table">新增站点</GuipButton>
          <GuipButton size="form">前往添加</GuipButton>
        </div>
        <div class="ele-item">
          <label for="">强按钮：</label>
          <!-- 默认 type= primary  normal 样式 -->
          <GuipButton>默认</GuipButton>
          <GuipButton loading>按钮</GuipButton>
          <GuipButton disabled>按钮</GuipButton>
        </div>
        <div class="ele-item">
          <label for="">弱按钮：</label>
          <GuipButton type="ignore">按钮</GuipButton>
          <GuipButton type="ignore" loading>按钮</GuipButton>
          <GuipButton type="ignore" disabled>按钮</GuipButton>
        </div>
        <div class="ele-item">
          <label for="">中按钮：</label>
          <GuipButton type="system">按钮</GuipButton>
          <GuipButton type="system" loading>按钮</GuipButton>
          <GuipButton type="system" disabled>按钮</GuipButton>
        </div>
        <div class="ele-item">
          <label for="">文字按钮：</label>
          <GuipButton type="text">强引导</GuipButton>
          <GuipButton type="grey">弱引导</GuipButton>
        </div>
        <div class="ele-item">
          <label for="">按钮套餐：</label>
          <GroupFormBtns />
        </div>
      </section>
      <section class="demo-section">
        <h2>输入框集合</h2>
        <div class="ele-item">
          <label for="">输入框：</label>
          <GuipInput ref="GuipInput" v-model="form.input1" width="200px" height="30px" placeholder="这是自定义默认提示语" />

          <div style="width: 20px;height: 10px;"></div>

          <GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput" @blur="handleInput"
            @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />

          <div style="width: 20px;height: 10px;"></div>

          <GuipInput v-model="form.input3" width="400px">
            <span slot="prependshow">http:</span>
            <!-- <img slot="prefix" src="../assets/radio_checked.svg" alt=""> -->
            <!-- 输入框后面小图标 -事件自定义 -->
            <i slot="suffix" class="el-icon-close" @click="handleClear"></i>
            <!-- <img slot="suffix" src="../assets/radio_nochecked.svg" alt="" @click="handleClear"> -->

            <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
            <!-- <GuipButton slot="appendshow" size="mini">默认按钮</GuipButton> -->

            <!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
            <span slot="appendshow">.checkcopy.com</span>
          </GuipInput>
          <!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
        </div>
        <div class="ele-item">
          <label for="">文本域：固定行数</label>
          <GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="1" />
        </div>
        <div class="ele-item">
          <label for="">文本域：自适应高度</label>
          <GuipTextarea :styleObject="{ width: '450px' }" placeholder="自适应高度" autosize />
        </div>

        <div class="ele-item">
          <label for="">文本域：自定义label、描述</label>
          <GuipTextarea label="详细介绍" column="column" prop="doctor_detail" width="400px" height="40px"
            placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" show-word-limit />
        </div>
      </section>
      <section class="demo-section">
        <h2>实时预览tab组件</h2>
        <DevicePreview>
          <template #desktop>
            电脑端内容-内容自定义
          </template>
          <template #mobile>
            内容自定义
            手机端端内容-- 手机端端内容
          </template>
        </DevicePreview>
      </section>
      <section>
        <h2>单选框组件集合</h2>
        <div class="ele-item">
          <label for="">单选框(对象格式)：</label>
          <GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
            @change="radioChange" :rules="rules.language" />
        </div>
        <div class="ele-item">
          <label for="">单选框2（数组格式 + 自定义取值）：</label>
          <GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language"
            @change="radioChange" :rules="rules.language" label-key="name" :disabledKeys="['1']" value-key="id" />
        </div>
        <div class="ele-item">
          <label for="">单选框：</label>
          <el-radio v-model="radio1" :label="1">选项一</el-radio>
          <el-radio v-model="radio1" :label="2">选项二</el-radio>
        </div>

        <div class="ele-item">
          <label for="">单选框组：</label>
          <el-radio-group v-model="radio" @input="radioChange">
            <el-radio :label="3">备选项</el-radio>
            <el-radio :label="6">备选项</el-radio>
            <el-radio :label="9">备选项</el-radio>
          </el-radio-group>
        </div>
      </section>

    </el-form>

  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '测试一下',
      domainOptions: [
        {
          value: '.chachongz.com',
          label: '111.chachongz.com',
          id: '11',
          name: '测试一下自定义名称111'
        },
        {
          value: '.turnitin.org.cn',
          label: '222.turnitin.org.cn',
          id: '22',
          name: '测试一下自定义名称222'
        },
        {
          value: '.jishu.chachongz.com',
          label: '333.jishu.chachongz.com',
          id: '33',
          name: '测试一下自定义名称333'
        },
      ],
      tableData3: [{
        id: '12987122',
        name: '王小虎',
        amount1: '234',
        amount2: '3.2',
        amount3: 10
      }, {
        id: '12987123',
        name: '王小虎',
        amount1: '165',
        amount2: '4.43',
        amount3: 12
      }, {
        id: '12987124',
        name: '王小虎',
        amount1: '324',
        amount2: '1.9',
        amount3: 9
      }, {
        id: '12987125',
        name: '王小虎',
        amount1: '621',
        amount2: '2.2',
        amount3: 17
      }, {
        id: '12987126',
        name: '王小虎',
        amount1: '539',
        amount2: '4.1',
        amount3: 15
      }],
      tableWidth: 0,
      currentPage: 1,    //当前页
      pageSize: 5,   //每页的容量
      total: 0,   //列表总数
      tableLoading: false,
      timer: null,
      date1: '',
      switchValue: true,
      switchValue1: 1,
      switchValue2: '0',
      dialogVisible1: false,
      dialogVisible: false,//是否展示弹框
      showCancelButton: true, // 控制是否显示取消按钮
      showCloseButton: true, // 控制是否显示关闭按钮
      form: {
        username: '',
        language: '',
        domain_set: '',
        domainSuffix: '11',
        domainSuffix1: '.chachongz.com',
        card: '1',
        input1: '跨年的烟火,绽放天空',
        input2: '',
        input3: '',
      },
      languageOptions1: [
        { label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh', id: '1', name: '麻辣烫' },
        { label: 'Python', value: 'py', selectedLabel: 'JavaScripthhhhhhhhhh', id: '10', name: '易烊千玺' },
        { label: 'Java', value: 'java', disabled: true, selectedLabel: 'JavaScripthhhhhhhhhh', id: '11', name: '王源' }, // 禁用选项
        { label: 'Go', value: 'go', selectedLabel: 'JavaScripthhhhhhhhhh', id: '12', name: '王俊凯' },
      ],
      languageOptions: {
        '20': '查重站',
        '31': 'AI站'
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        card: [
          { required: true, message: '请选择有效信息', trigger: 'blur' }
        ],
        language: [
          { required: true, message: '请选择语言', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ]
      },
      usernameRules: [{ required: true, message: 'Username is required', trigger: 'blur' }],//单独自定义rules
      msg: "测试",
      title: "相关附件",
      edit: false,
      action: true,
      header: false,
      width: 1920,
      height: 1080,
      dataList: [
        { name: "张三", age: 19, id: 1 },
        { name: "李四", age: 20, id: 2 },
      ],
      formList: [],
      // 模拟数据 详细 测试
      fromItem: {
        id: "Shanghai",
        id1: "选项4",
        name: "用户名",
        radioId: "2",
        checkboxId: ["上海", "北京"],
        textareaIner: "textarea",
        dateTime: "2023-09-12 00:00:00",
        uploadList: [
          {
            name: "小梨猫.jpg",
            size: 160517,
            uid: 1695291434025,
            url: "https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2",
          },
        ],
      },
      // 表格数据
      tableData2: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        price: '20',
        age: 20,
        // 在支持修改的项目中，需要主动保留一份原始数据
        edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎11',
        address: '上海市普陀区金沙江路 151811 弄',
        price: '10',
        age: 30,
        edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'

      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        price: '200',
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      tableData4: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        price: '20',
        age: 20,
        // 在支持修改的项目中，需要主动保留一份原始数据
        edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎11',
        address: '上海市普陀区金沙江路 151811 弄',
        price: '10',
        age: 30,
        edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'

      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        price: '200',
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      // 表格列配置
      columns: [
        { prop: 'name', label: '姓名（带气泡）', popover: true }, // 支持气泡框
        { prop: 'age', label: '年龄', popover: true }, // 不支持气泡框
        { prop: 'address', label: '地址（带气泡）', popover: true }, // 支持气泡框
      ],
      optionss: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      cities: [
        {
          value: "Beijing",
          label: "北京",
        },
        {
          value: "Shanghai",
          label: "上海",
        },
        {
          value: "Nanjing",
          label: "南京",
        },
        {
          value: "Chengdu",
          label: "成都",
        },
        {
          value: "Shenzhen",
          label: "深圳",
        },
        {
          value: "Guangzhou",
          label: "广州",
        }
      ],
      tableData: [],
      input: 'hahhahah',
      defaultValue: 'asdasda',
      radio: 3,
      radio1: 5,
      btnstyleObj: {
        width: '388px',
        height: '46px',
        borderRadius: '4px',
        background: '#006AFF',
      },
      btnstyleObj1: {
        width: '247px',
        height: '46px',
        borderRadius: '4px',
      },
      styleObject: {
        minWidth: '200px',
        maxWidth: '400px',
        // height: '40px'
      },
      styleObject1: {
        width: '600px',
        height: '50px'
      },
      plain: false,

      options: [{
        value: '选项1',
        label1: '黄金hhhhhh',
        id1: '1',
        id2: '啊11哈哈',
        label: '黄金糕'
      }, {
        value: '选项2',
        id1: '12',
        id2: '啊22哈哈',
        label1: '双皮奶hhhhhhhhh',
        label: '双皮奶'
      }, {
        value: '选项3',
        id1: '13',
        id2: '啊33哈哈',
        label1: '蚵仔煎hhhhhhhhh',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        id1: '14',
        id2: '啊444哈哈',
        label1: '双皮奶hhhhhhhhh',
        label: '龙须面'
      }, {
        value: '选项5',
        id1: '155',
        id2: '啊55哈哈',
        label1: '双皮奶hhhhhhhhh',
        label: '北京烤鸭'
      }],
    }
  },
  created() {
    console.log('当前组件注册情况:', this.$options.components)
  },
  computed: {
    currentDomainItem() {
      return this.findItemById('id', 'domainSuffix');
    }
  },
  methods: {
    // 手动copy内容
    handleClickCopy() {
      this.$copy(this.form.input1, {
        successMsg: '内容已复制到剪贴板',
        errorMsg: '复制失败，请按Ctrl+C手动复制',
        vm: this
      });
    },
    // 自定义的radio label 展示内容
    formatLabel(option) {
      return `${option.name} (ID: ${option.id})`;
    },
    findItemById(valueKey, key) {
      // 自动查找选中项 
      return this.domainOptions.find(item => item[valueKey] === this.form[key]);
    },
    toggleDrop1(e) {
      this.$refs.dropDomain1.toggleDropdown(e)
    },
    toggleDrop(e) {
      this.$refs.dropDomain.toggleDropdown(e)
    },
    changeInputtest(e) {
      console.log(e, '---000changeInputtest');
    },
    changeSelectIp(item) {
      // 选中项
      // this.selectedItem1 = { ...item };
      console.log(item, this.form.domainSuffix, this.form.domainSuffix1, '选中的项-值-');
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row, column);
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },

    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row, column);

      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    openMessage(type) {
      console.log(type);
      // 单独指定方法调用
      switch (type) {
        case 'success':
          this.$Message.success('成功，文案自定义')
          break;
        case 'error':
          this.$Message.error('失败，文案自定义')
          break;
        case 'info':
          this.$Message.info('提示，文案自定义')
          break;
      }
      // 自定义选项
      // this.$Message({
      //   type: 'success',
      //   title: '成功标题',
      //   message: '这是一条成功的提示消息',
      //   duration: 5000,
      //   showClose: true,
      //   center: true
      // })
    },
    showTooltip() {
      this.$refs.tooltip.show()
    },
    hideTooltip() {
      this.$refs.tooltip.hide()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getStagePurchase()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getStagePurchase()
    },
    getStagePurchase() {
      this.tableLoading = true
      const that = this
      that.tableData = []
      this.$http('POST', '/supernew/ajax_get_stage_purchase', {
        type: 0,
        cur_page: 1,
        page_size: 5,
      }, {
        headers: {
          'AUTH': '3c901fa4a19a7ad9d01238890863d499'
        }
      }).then(response => {
        this.tableLoading = false
        this.$nextTick(() => {
          that.tableData = response.data.list
          // console.log(that.tableData,'---that.tableData');
          // that.type2name = response.data.type2name
          that.total = response.data.total
        })
      }).catch(error => {
        console.error(error, 'error')
      })
    },
    btnClick() {

    },
    openLoading() {
      this.$store.dispatch('showLoading')
      setTimeout(() => {
        this.$store.dispatch('hideLoading')
      }, 2000)

    },
    handleFilter(column) {
      // 在这里处理筛选逻辑
      console.log('筛选列:', column);
    },
    // 部分情况可能导致页面不更新，增加 key 强制重新渲染
    random() {
      var randomNumber = Math.random();
      return randomNumber
    },
    onSwitchChange(value) {
      console.log('Switch 状态变化:', this.switchValue, value);
    },
    // 弹框相关方法---start
    openDialog() {
      this.dialogVisible = true;
    },
    openDialog1() {
      this.dialogVisible1 = true;
    },
    // 确认按钮事件
    handleConfirm() {
      this.$message.success('点击了确认按钮');
      this.dialogVisible = false;
    },
    // 取消按钮事件
    handleCancel() {
      this.$message.warning('点击了取消按钮');
      this.dialogVisible = false;
      this.dialogVisible1 = false;
    },
    // 关闭弹框事件
    handleClose() {
      this.$message.info('弹框已关闭');
      this.dialogVisible = false;
    },
    dialogVisibleChange(data) {
      console.log(data, 'data098908090');
    },
    // 弹框相关方法---end

    // 选择表格某一项 点击  
    handlePriceClick(row) {
      this.currentRow = row;
      this.editedPrice = row.price;
      this.dialogVisible = true;
    },

    // 表格气泡框-----
    // 确认事件
    onConfirm(row, prop) {
      console.log('确认修改:', row, prop);
      this.$message.success('修改成功');
      this.$set(this.tableData4, row)
      console.log(this.tableData4, 'this.tableData=====');
    },
    // 取消事件
    onCancel(row, prop) {
      console.log('取消修改:', row, prop);
      this.$message.info('已取消');
      this.$set(this.tableData, row)
    },
    // 表格气泡框-----

    // 监听单选框组变化
    radioChange(data) {
      console.log(data, 'radio--data');
    },
    handleClick(row) {
      console.log(row);
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        console.log(this.form, '======formxinxi');
        if (valid) {
          alert('提交成功!');
        } else {
          return false;
        }
      });
    },
    // 重置表单
    resetForm() {
      this.$refs.form.resetFields();
    },
    triggerError() {
      this.$refs.formRef.validateField('username', (error) => {
        if (error) {
          console.log('错误信息:', error);
        } else {
          console.log('无错误');
        }
      });
    },
    getFormdata() {
      console.log(this.$refs.GuipInput.value);
    },
    handleInput(value) {
      console.log(value, 'value===输入框输入得知');
    },
    handleClear(value) {
      this.form.input3 = '这是我清除后给的文案'
      // this.handleInput('')
      console.log(value, 'value===qinghcu');
    },
    getList() {
      const dataList = rules();
      dataList.forEach((item) => {
        if (item.field === "id") {
          item.options = this.cities;
        }
        if (item.field === "id1") {
          item.options = this.optionss;
        }
      });
      this.formList = dataList;
    },
    save() {
      this.$refs.VabForm.submitForm("ruleForm");
    },
    //取消
    cancellation() {
      this.$refs.VabForm.resetForm("ruleForm");
    },
    // 表格点击、选择
    handleSelectionChange(data) {
      // 多选模式下的时候 data 为数组格式
      // 单选的时候是 对象
      console.log(data, '表格行信息');
    },
    // 全选按钮
    toggleAllSelection() {
      // console.log(this.$refs.multipleTable,'this.$refs.multipleTable');
      this.$refs.multipleTable.$refs.guiptable.toggleAllSelection();
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
      // 确保离开组件时关闭 loading
      this.$store.dispatch('hideContentLoading')
    }
  }
}
</script>

<style scoped>
.demo-container {
  padding: 20px;
  max-width: 90%;
  margin: 0 auto;
}

.ele-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 20px 0 30px;

  label {
    font-size: 16px;
    font-weight: bold;
    width: 100px;
    margin-right: 10px;
    text-align: left;
  }
}

.demo-section {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
}

h2 {
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
</style>