ly-ui-mobile

安装

npm i ly-ui-mobile

使用

配置

import Vue from 'vue'
import LyUIMobile from 'ly-ui-mobile'
import request from '@/utils/request'
Vue.use(LyUIMobile, {
  httpClient: request // 请求配置
})

示例

 <ly-form ref="lyForm" v-model="formData" :info="lyFormInfo" />

<script>
    export default {
      data() {
        return {
          formData: {}, // 表单值
          lyFormInfo: {
            rows: [
              {
                title: '开台配置',
                items: [
                  //  内置组件：开关
                  {
                    type: 'switch',
                    prop: 'is_need_desk_open_fee',
                    label: '开台费',
                    value: true,
                    required: true,
                    attrs: { size: '20', 'active-color': '#5632fe' }
                  },
                  {
                    type: 'switch',
                    prop: 'is_enable_min_consume',
                    label: '最低消费',
                    value: false,
                    required: true,
                    attrs: { size: '20', 'active-color': '#5632fe' }
                  },
                  // 内置组件：输入框 
                  {
                    type: 'input',
                    prop: 'min_consume_amount',
                    label: '低消金额',
                    value: '',
                    // 校验规则
                    required: true,
                    rules: [{ required: true, message: '请填写低消金额' }],
                    attrs: { required: true, type: 'number', placeholder: '请填写低消金额' },
                    depends: [{ prop: 'is_enable_min_consume', value: true }]
                  },
                  // 自定义组件：通过component传入组件配置
                  {
                    prop: 'marketing_staff_id',
                    label: '订台人',
                    component: () => import('@/components/simple-form/components/staff-selector/index.vue'),
                    value: '',
                    required: true,
                    attrs: { placeholder: '选择订台人' },
                    rules: [
                      {
                        required: true,
                        message: '请选择订台人'
                      }
                    ]
                  },
                  // 自定义组件：type指定的组件需要通过Vue.component全局注册后才能使用
                  {
                    type: 'empty-data',
                    prop: 'empty_data',
                    label: '空状态',
                    value: ''
                  }
                ]
              }
            ],
            // 按钮
            buttons: {
              // 提交按钮
              submit: {
                show: true,
                text: '确认开台',
                attrs: { round: true, block: true, type: 'info' },
                scene: {
                  formatter: (data) => {
                    return data
                  },
                  request: {
                    url: '/dashboard/desk-opens',
                    method: 'POST',
                    loadingMessage: '开台中...',
                    onSuccess: (res, data) => {}
                  }
                }
              }
            }
          }
        }
      } 
    }
</script>

效果

开发

npm run serve

构建

npm run lib 

npm主页

https://www.npmjs.com/package/ly-ui-mobile