iui-vue-p

v0.1.5

Published

2 years ago

iui vue 组件库

Downloads

154

0High
0Medium
0Low

iui-pql

vue component iui library

iui-vue 文档说明

安装

npm install iui-vue-p -S

快速上手

//注册全部组建
// 全部引入
import IUI from "iui-vue-p"
import 'iui-vue-p/styles';
app.use(IUI)

默认颜色说明

|属性|说明|类型|默认值| |:---:|:---:|:---:|:---:| |状态色|#27E14F|String|成功| |状态色|#F1F326|String|信息| |状态色|#FFA00D|String|提醒| |状态色|#FF5520|String|失败|

默认主题说明

|属性|说明|类型|默认值| |:---:|:---:|:---:|:---:| |主题色|#0D9DFF|String|主题色| |线条色|#EBEEF5|String|线条色| |标题色|#909399|String|文字标题浅色| |内容色|#606266|String|文字内容深色| |背景色|#FAFAFA|String|背景色| |默认背景色|#FFFFFF|String|默认背景色| |表单一级颜色|#F7FBFF|String|一级颜色| |一级表单字体|#627FA4|String|一级字体颜色|

重置样式代码说美国

:root {  
  /* 状态色 */  
  --success-color-iui: #27E14F;  /*成功*/
  --info-color-iui: #F1F326;    /*信息*/
  --warning-color-iui: #FFA00D;    /*提醒*/
  --error-color-iui: #FF5520;    /*失败*/
  
  /* 默认主题色 */  
  --theme-color-iui: #0D9DFF;    /* 主题色 */
  --line-color-iui: #EBEEF5;    /* 线条色 */
  --title-color-iui: #909399;    /* 标题色 */
  --content-color-iui: #606266;    /* 内容色 */
  --bg-color-iui: #FAFAFA; /*背景色*/
  --default-bg-color-iui: #fff; /*默认背景色*/
  --table-bg-color-parent:#F7FBFF; /* 表格 顶层页面的颜色*/
  --table-font-color-parent:#627FA4;/* 表格 顶层页面的字体颜色*/

  --font-size-iui: 14px; /* 字体大小 */
  --font-size-iui-key: 16px; /* 字体大小 */
  --font-size-family: 'OPlusSans3-Medium'; /* 字体 */
  --font-weight-iui: 500; /* 字体粗细 */

弹窗组件

 组件名称 <IuiVueDialog></IuiVueDialog>

|属性|说明|类型|可选值|默认值| |:---:|:---:|:---:|:---:|:---:| |visible|是否显示弹窗|Boolean|true/false| false| |title|自定义标题|String|-|-| |closable|是否显示关闭按钮|Boolean|true/false|true| |size|区分弹窗内容区域的大小|String|large/medium/small/mini|large| |customClass|自定义类名|String|-|-| |content|中间内容填充|Array|[]|[]| |-------|text|Object|{type:'text';data:String;}|单独文字弹窗| |-------|textarea|Object|{type:'textarea'; title:String; data:Array<{title:String; value:String; required:Boolean; placeholder:String; }>}|文字加输入框| |-------|text|Object|{type:'table';data:Array<{lable:String; value:String; col:Number; disabled:Boolean; meta:Array; data:[]}>;}|单独文字弹窗| |:---:|:---:|:---:|:---:|:---:| |okFun|绑定确认按钮函数|Function|-|-| |noFun|绑定取消/关闭按钮函数|Function|-|-|

<IuiVueDialog 
  :title="vis.title" 
  :customClass="vis.customClass"  
  :closable="vis.closable" 
  :content="vis.content" 
  :size="vis.size" 
  :type="vis.type" 
  :visible="vis.visible" 
  :okFun="() => { vis.visible = false }" 
  :noFun="() => { vis.visible = false }">

  <!-- 自定义内容 -->
  <template v-slot:content>
    我是自定义的内容 在这里哦
  </template>
  <template v-slot:footer>
    我是自定义的内容 在这里哦
  </template>
  <!-- 自定义内容 -->

</IuiVueDialog>

单独文字文本内容

alt text

{
  type: 'text',
  data: "我是内容：密评专家 我是自己配置的", // type为text的数据
},

文字加输入框 / 禁用输入框

alt text

{
      type: 'textarea',
      title: '我是textarea的标题',
      data: [
        {
          title: '标题',
          required: true,
          value: '',
          placeholder: '请输入内容'
        },
        {
          title: '标题',
          required: false,
          value: '',
          placeholder: '请输入内容',
          disabled: true,
        }
      ]
    },

表格输入框

alt text

{
      type: 'table',
      data: [
        {
          lable: '标题文字',
          col: 3, // 几列 自定义数据存放几列
          placeholder: '请输入内容',
          disabled: true,
          meta: ['title', 'value'],
          data: [
            {
              title: '标题0',
              value: '标题0',
            },
            {
              title: '标题1',
              value: '标题1',
            }
          ]
        },
        {
          lable: '标题文字2',
          col: 1, // 几列 自定义数据存放几列
          placeholder: '请输入内容',
          disabled: true,
          meta: ['title', 'value'],
          data: [{
            title: '标题0',
            value: '标题0',
          },
          {
            title: '标题1',
            value: '标题1',
          }
          ]
        }
      ]
    }

间距组件

组件名称 <IuiVueElSpace></IuiVueElSpace>

|属性|说明|类型|可选值|默认值| |:---:|:---:|:---:|:---:|:---:| |size|间隔大小|string / number / [number, number]|无| small| |direction|间隔大小|string / number / [number, number]|无| small|

<IuiVueElSpace>
  <IuiVueElSpace :size="'large'" direction="vertical">
    <IuiVueButton>大间距</IuiVueButton>
    <IuiVueButton>大间距</IuiVueButton>
  </IuiVueElSpace>
  <IuiVueElSpace :size="'default'" direction="vertical">
    <IuiVueButton>Default</IuiVueButton>
    <IuiVueButton>Default</IuiVueButton>
  </IuiVueElSpace>
  <IuiVueElSpace :size="'small'" direction="vertical">
    <IuiVueButton>小间距</IuiVueButton>
    <IuiVueButton>小间距</IuiVueButton>
  </IuiVueElSpace>
</IuiVueElSpace>

Alert组件

组件名称 <IuiVueElAlert ></IuiVueElAlert >

|属性|说明|类型|可选值|默认值| |:---:|:---:|:---:|:---:|:---:| |title|标题|string|无| 无| |type|类型|success/warning/info/error|无| info| |close-text|自定义关闭按钮文本|string|无| 无|

<IuiVueEllAlert title="Success alert" type="success"></IuiVueEllAlert>
<IuiVueEllAlert title="Customized close text" type="info" close-text="Gotcha"></IuiVueEllAlert>

import IuiVueElMessage from "iui-vue-p/components/iui-vue-EIMessage"
IuiVueElMessage.info({ plain: true, message: '1', })
IuiVueElMessage.success({ plain: true, message: '2' })
IuiVueElMessage.warning({ message: '4', showClose: true, })
IuiVueElMessage.error({ plain: true, message: '3' })
IuiVueElMessage.error({ plain: true, message: '3' })

alt text

按钮组件

组件名称 <IuiVueButton></IuiVueButton>

|属性|说明|类型|可选值|默认值| |:---:|:---:|:---:|:---:|:---:| |size|大小选择|string|large/default/samll| 无| |types|类型|primary-蓝/default-默认/danger-红色|无| default| |disabled|禁用|boolean|false/true| false|

<IuiVueButton types="primary">Primary</IuiVueButton> 主按钮 - 纯色
<IuiVueButton type="default" plain>Success</IuiVueButton>成功 - 线框
<IuiVueButton types="danger" round>Danger</IuiVueButton>错误 - 圆角

alt text

表单组件

组件名称 <IuiVueFromCell></IuiVueFromCell>

|属性|说明|类型|可选值|默认值| |:---:|:---:|:---:|:---:|:---:| |type|一级页面/二级页面显示的单元格|string|parent/child| parent| |content|数据|Array|[]| []|

const vis2: any = reactive({
  type: 'parent',// parent 一级页面  child 二级页面显示的单元格
  content: [
    {
      type: 'transverse_from', //横向的列表
      col: 1, // 几列 自定义数据存放几列
      placeholder: '请输入内容',
      disabled: true,
      meta: ['title', 'value'], //data数据渲染字段
      data: [
        {
          title: '标题0',
          value: '',
        }
      ]
    },
    {
      type: 'transverse_from', //横向的列表
      col: 3, // 几列 自定义数据存放几列
      placeholder: '请输入内容',
      disabled: true,
      meta: ['title', 'value'],
      data: [
        {
          title: '标题0',
          value: '',
        }
      ]
    },
    {
      type: 'direction_from', //横向的列表
      column: [{
        prop: 'date',
        label: 'Date数据'
      }],
      data: [{
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      }]
    },
    {
      type: 'textarea_from',
      meta: ['label', 'value'],
      data: [
        {
          label: '文本域',
          value: '我是内容'
        },
        {
          label: '短内容',
          value: '我是内容 也可以是html'
        }
      ]
    },
    {
      type: 'textarea_edit_from',
      meta: ['label', 'value'],
      data: [
        {
          label: '富文本内容',
          value: `富文本内容,<div class="xben-container"> <img src="https://element-plus.org/images/sponsors/CRMEB-l.png"/> <img src="https://element-plus.org/images/sponsors/CRMEB-l.png"/> <img src="https://element-plus.org/images/sponsors/CRMEB-l.png"/> </div>`
        },
        {
          label: '短内容',
          value: '我是内容 也可以是html'
        }
      ]
    }
  ]
})

 同一方案下带文件的多条记录表单样式 组件：<IuiVueElTable></IuiVueElTable>
 <IuiVueElTable :show-header="false" :data="tableData" :span-method="objectSpanMethod" border
      style="width: 100%; margin-top: 20px">
      <IuiVueElTableColumn prop="id" label="ID" width="180" />
      <!-- solt 需要传入 :slotName="['default']" -->
      <IuiVueElTableColumn label="Name" :slotName="['default']">
        <template #default="scope">
          <div>
            2024-01-17 15:54:08
            <a href="">实施方案.pdf</a>
            <IuiVueElTag style="float:right;" round effect="plain">查看整改反馈</IuiVueElTag>
          </div>
        </template>
      </IuiVueElTableColumn>
    </IuiVueElTable>

组件名称 <IuiVueTextarea></IuiVueTextarea>

|属性|说明|类型|可选值|默认值| |:---:|:---:|:---:|:---:|:---:| |label|标题|boolan|false/true| false| |disabled|禁用|boolan|false/true| false|

  <IuiVueTextarea :data="vis3.data"> </IuiVueTextarea>
  const vis3: any = reactive({
    data: [{
      label: '标题',
      disabled: false,
      placeholder: '请输入内容',
      value: ''
    }, {
      label: '标题',
      disabled: false,
      placeholder: '请输入内容',
      value: ''
    }, {
      label: '标题',
      disabled: true,
      placeholder: '请输入内容',
      value: ''
    },]
  })

alt text

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

iui-vue 文档说明

安装

快速上手

默认颜色说明

默认主题说明

重置样式代码说美国

弹窗组件

单独文字文本内容

文字加输入框 / 禁用输入框

表格输入框

间距组件

Alert组件

按钮组件

表单组件