element-ui-rw-dispatcher

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

文档地址: http://xiepeng.cc/rw-dispatcher/#/

安装

npm 安装

npm i element-ui-rw-dispatcher

yarn 安装

yarn add element-ui-rw-dispatcher

引入

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

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

import Vue from 'vue'
import ElementUiRwDispatcher from 'element-ui-rw-dispatcher'
import 'element-ui-rw-dispatcher/styles/index.scss'
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>
  <el-form ref="form" :model="form" label-width="80px" size="small">
    <el-form-item label="活动名称">
      <el-input-dispatcher v-model="form.name" />
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select-dispatcher v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai" />
        <el-option label="区域二" value="beijing" />
      </el-select-dispatcher>
    </el-form-item>
    <div style="text-align: right">
      <el-button
        v-show="rwDispatcherState === 'write'"
        type="primary"
        size="small"
        @click="toggleState"
      >编辑</el-button>
      <el-button
        v-show="rwDispatcherState === 'read'"
        type="primary"
        size="small"
        @click="toggleState"
      >详情</el-button>
    </div>
  </el-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 ElementUiRwDispatcher from 'element-ui-rw-dispatcher'
import 'element-ui-rw-dispatcher/styles/index.scss'

Vue.use(ElementUiRwDispatcher, {
  namespace: 'rw-dispatcher',
  activeText: '是',
  inactiveText: '否',
  separator: '|',
  rangeSeparator: '-',
  readStateRender: {
    // ...
  }
})

配置参数

参数	说明	类型	默认值
namespace	命名空间，read 状态渲染函数、状态管理、局部配置等参数的前缀。使用过程中如果有参数冲突时可以改这个值。	String	rw-dispatcher
activeText	值为真时的文字描述	String	是
inactiveText	值为假时的文字描述	String	否
separator	分隔符，组件有多个值且是并列关系，read 状态渲染时用该符号间隔。如组件的值为 ['Tom', 'Jerry']，显示 'Tom\|Jerry'。	String	\|
rangeSeparator	连接符，组件有多个值且是区间关系，read 状态渲染时用该符号连接。如组件的值为 ['2019/06/15', '2019/08/15']，显示 '2019/06/15-2019/08/15'。	String	-
readStateRender	read 状态自定义渲染函数。具体配置如下	Object	{}

自定义渲染函数

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

可配置项	说明	类型
elInput	ElInputDispatcher 自定义渲染函数	Function
elInputNumber	InputNumberDispatcher 自定义渲染函数	Function
elAutocomplete	ElAutocompleteDispatcher 自定义渲染函数	Function
elSelect	ElSelectDispatcher 自定义渲染函数	Function
elCheckbox	ElCheckboxDispatcher 自定义渲染函数	Function
elCheckboxButton	ElCheckboxButtonDispatcher 自定义渲染函数	Function
elCheckboxGroup	ElCheckboxGroupDispatcher 自定义渲染函数	Function
elRadio	ElRadioDispatcher 自定义渲染函数	Function
elRadioButton	ElRadioButtonDispatcher 自定义渲染函数	Function
elRadioGroup	ElRadioGroupDispatcher 自定义渲染函数	Function
elSwitch	ElSwitchDispatcher 自定义渲染函数	Function
elDatePicker	ElDatePickerDispatcher 自定义渲染函数	Function
elTimePicker	ElTimePickerDispatcher 自定义渲染函数	Function
elTimeSelect	ElTimeSelectDispatcher 自定义渲染函数	Function
elRate	ElRateDispatcher 自定义渲染函数	Function
elSlider	ElSliderDispatcher 自定义渲染函数	Function

局部配置

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

使用

<template>
  <el-form ref="form" :model="form" label-width="80px" size="small">
    <el-form-item label="活动名称">
      <el-input-dispatcher v-model="form.name" />
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select-dispatcher v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select-dispatcher>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  provide () {
    return {
      rwDispatcherProvider: this
    }
  },
  data () {
    return {
      rwDispatcherState: 'write',
      rwDispatcherConfig: {
        readStateRender: {
          elInput (h, context) {
            return h('span', {
              style: { color: 'red' }
            }, context.data.attrs.value)
          },
          elSelect (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 ElementUiRwDispatcher from 'element-ui-rw-dispatcher'

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

局部配置

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

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

组件配置

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

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

优先级顺序是：

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

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

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

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

read 状态会应用 slot 的渲染函数。

组件配置

ElInputDispatcher

Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined

Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

ElInputNumberDispatcher

Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined

Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

ElSelectDispatcher

Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined
${namespace}-separator （默认 rw-dispatcher-separator）	自定义分隔符	String	\|

Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

ElCheckboxDispatcher

Checkbox Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined

Checkbox Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

CheckboxButton Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined

CheckboxButton Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

CheckboxGroup Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined
${namespace}-separator （默认 rw-dispatcher-separator）	自定义分隔符	String	\|

CheckboxGroup Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

ElRadioDispatcher

Radio Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined

Radio Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

RadioButton Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined

RadioButton Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

RadioGroup Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined

RadioGroup Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

ElDatePickerDispatcher

Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined
${namespace}-separator （默认 rw-dispatcher-separator）	自定义连接符。与 type="datetimerange\|daterange\|monthrange" 配合使用。连接符共四个地方配置，分别是组件配置 separator\|${namespace}-separator、局部配置、全局配置。优先级是组件配置 separator > 组件配置 ${namespace}-separator > 局部配置 > 全局配置	String	\|

Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

ElTimePickerDispatcher

Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined
${namespace}-separator （默认 rw-dispatcher-separator）	自定义连接符。与 is-range 配合使用。连接符共四个地方配置，分别是组件配置 separator\|${namespace}-separator、局部配置、全局配置。优先级是组件配置 separator > 组件配置 ${namespace}-separator > 局部配置 > 全局配置	String	\|

Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

ElTimeSelectDispatcher

Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined

Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

ElSwitchDispatcher

Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined

Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

ElRateDispatcher

Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined

Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

ElSliderDispatcher

Attributes

参数	说明	类型	默认值
${namespace}-state （默认 rw-dispatcher-state，kebeb-case）	组件状态，可选值为 "read"\|"write"，优先级高于局部状态	Function(h, context)	undefined
${namespace}-render （默认 rw-dispatcher-render，kebeb-case）	自定义渲染函数（props 形式）	Function(h, context)	undefined
${namespace}-range-separator （默认 rw-dispatcher-range-separator	自定义连接符	String	-

Scoped Slots

name	说明
${namespace}Render （默认 rwDispatcherRender，camelCase）	read 状态自定义渲染函数。参数是Vue 函数式组件]中的 context.data 和 context.children

Name		Name	Last commit message	Last commit date
Latest commit History 21 Commits
components		components
element-ui-source		element-ui-source
styles		styles
types		types
.gitignore		.gitignore
README.md		README.md
index.js		index.js
options.js		options.js
package.json		package.json
rw-dispatcher.js		rw-dispatcher.js
rw-dispatcher.ts		rw-dispatcher.ts
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

tedtse/element-ui-rw-dispatcher

Folders and files

Latest commit

History

Repository files navigation

element-ui-rw-dispatcher

安装

引入

使用

全局配置

使用

配置参数

自定义渲染函数

局部配置

使用

配置优先级

组件配置

ElInputDispatcher

Attributes

Scoped Slots

ElInputNumberDispatcher

Attributes

Scoped Slots

ElSelectDispatcher

Attributes

Scoped Slots

ElCheckboxDispatcher

Checkbox Attributes

Checkbox Scoped Slots

CheckboxButton Attributes

CheckboxButton Scoped Slots

CheckboxGroup Attributes

CheckboxGroup Scoped Slots

ElRadioDispatcher

Radio Attributes

Radio Scoped Slots

RadioButton Attributes

RadioButton Scoped Slots

RadioGroup Attributes

RadioGroup Scoped Slots

ElDatePickerDispatcher

Attributes

Scoped Slots

ElTimePickerDispatcher

Attributes

Scoped Slots

ElTimeSelectDispatcher

Attributes

Scoped Slots

ElSwitchDispatcher

Attributes

Scoped Slots

ElRateDispatcher

Attributes

Scoped Slots

ElSliderDispatcher

Attributes

Scoped Slots

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages