Iview-rw-dispatcher NPM

iview-rw-dispatcher

基于 iView form 组件的分发器，这样表单的编辑和详情就可以一套代码完成，节省了开发成本。

安装

npm 安装

npm i iview-rw-dispatcher

yarn 安装

yarn add iview-rw-dispatcher

引入

开发者可以选择完整引入和按需引入。下面介绍完整引入

在 main.js 中写入以下内容：

import Vue from 'vue'
import iViewRwDispatcher from 'iview-rw-dispatcher'
import 'iview-rw-dispatcher/styles/index.less'
import App from './App.vue'

Vue.use(ElementUiRwDispatcher)

new Vue({
  el: '#app',
  render: h => h(App)
})

使用

使用分发器比较使用表单只多了三步：

添加 provide 属性，其中 rwDispatcherProvider 的值指向自身
data属性中添加 rwDispatcherState 做状态管理（read or write）
原来表单元素的标签加一个 Dispatcher 后缀，其配置保持不变

<template>
  <Form ref="form" :model="form" :label-width="80" size="small">
    <FormItem label="活动名称">
      <InputDispatcher v-model="form.name" />
    </FormItem>
    <FormItem label="活动区域">
      <SelectDispatcher v-model="form.region" placeholder="请选择活动区域">
        <Option label="区域一" value="shanghai" />
        <Option label="区域二" value="beijing" />
      </SelectDispatcher>
    </FormItem>
    <div style="text-align: right">
      <Button
        v-show="rwDispatcherState === 'write'"
        type="primary"
        size="small"
        @click="toggleState"
      >编辑</Button>
      <Button
        v-show="rwDispatcherState === 'read'"
        type="primary"
        size="small"
        @click="toggleState"
      >详情</Button>
    </div>
  </Form>
</template>

<script>
export default {
  provide () {
    return {
      rwDispatcherProvider: this
    }
  },
  data () {
    return {
      rwDispatcherState: 'write',
      form: {
        name: '618电器折扣日',
        region: 'shanghai'
      }
    }
  },
  methods: {
    toggleState () {
      if (this.rwDispatcherState === 'write') {
        this.rwDispatcherState = 'read'
      } else {
        this.rwDispatcherState = 'write'
      }
    }
  }
}
</script>

全局配置

全局配置在插件初始化时配置。

使用

import Vue from 'vue'
import iViewRwDispatcher from 'iview-rw-dispatcher'
import 'iview-rw-dispatcher/styles/index.less'

Vue.use(iViewRwDispatcher, {
  namespace: 'rw-dispatcher',
  trueValue: '是',
  falseValue: '否',
  separator: '|',
  rangeSeparator: '-',
  readStateRender: {
    // ...
  }
})

配置参数

自定义渲染函数

所有自定义函数的参数均为 (h, context) Vue 函数式组件。具体配置如下：

可配置项	说明	类型
input	InputDispatcher 自定义渲染函数	Function
inputNumber	InputNumberDispatcher 自定义渲染函数	Function
autocomplete	AutocompleteDispatcher 自定义渲染函数	Function
select	SelectDispatcher 自定义渲染函数	Function
checkbox	CheckboxDispatcher 自定义渲染函数	Function
checkboxGroup	CheckboxGroupDispatcher 自定义渲染函数	Function
radio	RadioDispatcher 自定义渲染函数	Function
radioGroup	RadioGroupDispatcher 自定义渲染函数	Function
switch	SwitchDispatcher 自定义渲染函数	Function
datePicker	DatePickerDispatcher 自定义渲染函数	Function
timePicker	TimePickerDispatcher 自定义渲染函数	Function
rate	RateDispatcher 自定义渲染函数	Function
slider	SliderDispatcher 自定义渲染函数	Function

局部配置

如果组件的实际配置与全局配置不同，需要用局部配置覆盖全局配置，配置名默认rwDispatcherConfig。局部配置与全局配置的唯一区别，是局部配置没有命名空间(namespace)选项，而全局配置有。

使用

<template>
  <Form ref="form" :model="form" :label-width="80" size="small">
    <FormItem label="活动名称">
      <InputDispatcher v-model="form.name" />
    </FormItem>
    <FormItem label="活动区域">
      <SelectDispatcher v-model="form.region" placeholder="请选择活动区域">
        <Option label="区域一" value="shanghai" />
        <Option label="区域二" value="beijing" />
      </SelectDispatcher>
    </FormItem>
  </Form>
</template>

<script>
export default {
  provide () {
    return {
      rwDispatcherProvider: this
    }
  },
  data () {
    return {
      rwDispatcherState: 'write',
      rwDispatcherConfig: {
        readStateRender: {
          input (h, context) {
            return h('span', {
              style: { color: 'red' }
            }, context.data.attrs.value)
          },
          select (h, context) {
            const { data, children } = context
            const vnode = children.find(item => {
              return item.componentOptions.propsData.value === data.attrs.value
            })
            if (!vnode) {
              return null
            }
            return h('span', {
              style: { color: 'green' }
            }, vnode.componentOptions.propsData.label)
          }
        }
      },
      form: {
        name: '618电器折扣日',
        region: 'shanghai'
      }
    }
  }
}
</script>

配置优先级

read 状态的渲染函数有多套配置，分别是：

全局配置

插件初始化时配置。比如命名空间 namespace（默认 rwDispatcher），用法是：

import Vue from 'vue'
import iViewRwDispatcher from 'iview-rw-dispatcher'

Vue.use(iViewRwDispatcher, {
  // 全局配置
})

局部配置

在 provider 组件中的 ${namespace}Config 参数（默认 rwDispatcherConfig），用法是：

export default {
  data () {
    return {
      rwDispatcherConfig: {
        // 局部配置
      }
    }
  }
}

组件配置

单个组件的 props 和 slot。比如：

<DatePickerDispatcher type="daterange" rw-dispatcher-range-separator="-">
  <template #rwDispatcherRender="{ data, children }">
    <!-- slot -->
  </template>
</DatePickerDispatcher>

优先级顺序是：

组件配置 > 局部配置 > 全局配置，优先级高的配置会覆盖优先级低的配置。

组件配置中 slot > props。如下：

<template>
  <InputDispatcher :rw-dispatcher-render="inputRender">
    <template #rwDispatcherRender="{ data, children }">
      <!-- slot -->
    </template>
  </InputDispatcher>
</template>

<script>
export default {
  methods: {
    inputRender (h, context) {
      // render
    }
  }
}
</script>