iui-vue-p

iui-vue 文档说明

安装

npm install iui-vue-p -S

快速上手

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

默认颜色说明

默认主题说明

重置样式代码说美国

: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>

<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>

单独文字文本内容

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

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

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

表格输入框

{
      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>

<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 >

<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' })

按钮组件

组件名称 <IuiVueButton></IuiVueButton>

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

表单组件

组件名称 <IuiVueFromCell></IuiVueFromCell>

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 >实施方案.pdf</a>
            <IuiVueElTag style="float:right;" round effect="plain">查看整改反馈</IuiVueElTag>
          </div>
        </template>
      </IuiVueElTableColumn>
    </IuiVueElTable>

组件名称 <IuiVueTextarea></IuiVueTextarea>

  <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: ''
    },]
  })