x-components-plus

v0.1.3

Published

2 years ago

A Vue components which you can all beleive in.

0High
0Medium
0Low

zhixuanfan

vue component x x-components

Install

Install the remote package to the local

npm install x-components-plus

Import all or batch import

Import all

main.ts or main.js

import xComponentsPlus from 'x-components-plus' 
createApp(App).use(xComponentsPlus).mount('#app')

Batch import

normal vue files

<script setup>
import { xButton } from 'x-components-plus'
</script>
<template> 
  <xButton> button </xButton> 
</template>

Import style

main.ts or main.js

import 'x-components-plus/style.css'

Use of Components

x-row

Props

Event
Slot

| name | returned parameters | tip | | :-: | :-: | :-: | | defalut | no params | default solt |

Usage

<script setup>
import { xRow } from 'x-components-plus'
import { xCol } from 'x-components-plus'
</script>
<template>
  <xRow justify="center" align="center">
    <xCol>123</xCol>
  </xRow>
</template>

x-col

Props

| name | required | type | Optional | default | tip| | :-: | :-: | :-: | :-: | :-: | :-: | | span | false | number | the number bigger than 0 | 24 | the size of the occupied position (span / 24 * 100%) |

Event
Slot

| name | returned parameters | tip | | :-: | :-: | :-: | | defalut | no params | default solt |

Usage

<script setup>
import { xRow } from 'x-components-plus'
import { xCol } from 'x-components-plus'
</script>
<template>
  <xRow justify="center" align="center">
    <xCol>123</xCol>
  </xRow>
</template>

x-button

Props

Event
Slot

| name | returned parameters | tip | | :-: | :-: | :-: | | defalut | no params | default solt |

Usage

<script setup>
import { xButton } from 'x-components-plus'
</script>
<template>
  <xButton type="primary">
    <template> <span> button label </span> </template>
  </xButton>
</template>

x-calendar

Props

Event

| name | tip| | :-: | :-: | | update:modelValue | update modelValue | | changeDate | (selectedDate) => {} | | addSchedule | () => {} | | addedSchedule | (newSchedule) => {} |

Slot
Usage

<script setup>
import { xCalendar } from 'x-components-plus'
</script>
<template>
  <xCalendar> </xCalendar>
</template>

x-carouselChart

Props

Event

| name | tip| | :-: | :-: | | imgClick | (imgIndex, imgSrc) => {} |

Slot
Usage

<script setup>
import { xCarouselChart } from 'x-components-plus'
import { ref } from "vue";

const img = ref(['url1', 'url2', 'url2'])
</script>
<template>
  <carouselChart
    :imgList="img"
  >
  </carouselChart>
</template>

x-checkbox

Props

Event

| name | tip| | :-: | :-: | | update:modelValue | update modelValue | | change | (newValue, oldValue, restParams) => {} |

Slot

| name | returned parameters | tip | | :-: | :-: | :-: | | label | no params | label solt |

Usage

<script lang="ts" setup>
import { ref } from 'vue'
import { xCheckbox } from 'x-components-plus'

const xCheckboxValue = ref(false)
const checkBoxChenge = (val: any, oldVal: any) => {
	console.log('checkBoxChenge', val, oldVal)
}
</script>
<template>
	<xCheckbox
		v-model="xCheckboxValue"
		@change="checkBoxChenge"
		:label="'xCheckboxLabel'"
		checked
		:check-type="'notAll'"
	></xCheckbox>
</template>

x-checkboxGroup

Props

| name | required | type | Optional | default | tip| | :-: | :-: | :-: | :-: | :-: | :-: | | modelValue | false | string[], number[] | - | [] | checkboxGroup initial value |

Event

| name | tip| | :-: | :-: | | update:modelValue | update modelValue | | change | (modelValue, itemLabel, itemNewValue) => {} |

Slot

| name | returned parameters | tip | | :-: | :-: | :-: | | defalut | no params | default solt |

Usage

<script lang="ts" setup>
import { xCheckboxGroup, xCheckbox } from 'x-components-plus'
import { ref } from 'vue'

const checkBoxGroupValue = ref(['xCheckboxLabel1', 'xCheckboxLabel3'])
const checkBoxGroupChenge = (val: any, label: any, type: boolean) => {
	console.log('checkBoxGroupChenge', val, label, type)
}
const checkBoxChenge = (val: any, oldVal: any) => {
	console.log('checkBoxChenge', val, oldVal)
}
</script>
<template>
	<xCheckboxGroup @change="checkBoxGroupChenge" v-model="checkBoxGroupValue">
		<xCheckbox @change="checkBoxChenge" :label="'xCheckboxLabel1'"></xCheckbox>
		<xCheckbox @change="checkBoxChenge" :label="'xCheckboxLabel2'"></xCheckbox>
		<xCheckbox @change="checkBoxChenge" :label="'xCheckboxLabel3'"></xCheckbox>
		<xCheckbox @change="checkBoxChenge" :label="'xCheckboxLabel4'"></xCheckbox>
		<xCheckbox @change="checkBoxChenge" :label="'xCheckboxLabel5'"></xCheckbox>
	</xCheckboxGroup>
</template>

x-dialog

Props

Event

| name | tip| | :-: | :-: | | update:modelValue | update modelValue |

Slot

Usage

<script lang="ts" setup>
import { ref } from 'vue'
import { xDialog, xButton } from 'x-components-plus'

const visible = ref(false)
const open = () => {
	visible.value = true
}
</script>
<template>
	<xButton @click="open">open dialog</xButton>
	<xDialog v-model="visible">
		<div style="padding: 10px">
			<h1>Dialog body.</h1>
		</div>
	</xDialog>
</template>

x-input

Props

| name | required | type | Optional | default | tip| | :-: | :-: | :-: | :-: | :-: | :-: | | modelValue | false | string, number | - | '' | input value | | placeholder | false | string | - | please input | input placeholder | | size | false | string | mini, normal, middle, large | normal | input size | | clearable | false | boolean | true, false | true | display the button to clear all content | | inputWidth | false | number, string | persent | 100% | input width | | focusCallback | false | Function | - | () => { } | input focus callback | | blurCallback | false | Function | - | () => { } | input blur callback | | vaildCallback | false | Function | - | (val) => val | input vaild callback |

Event

| name | tip| | :-: | :-: | | update:modelValue | update modelValue | | change | (newValue) => {} | | input | (newValue) => {} |

Slot

| name | returned parameters | tip | | :-: | :-: | :-: | | rightIcon | no params | change clear icon |

Usage

<script lang="ts" setup>
import { ref } from 'vue'
import { xInput } from 'x-components-plus'

const value = ref('123')
</script>
<template>
	<xInput v-model="value"> </xInput>
</template>

x-inputSearch

Props

| name | required | type | Optional | default | tip| | :-: | :-: | :-: | :-: | :-: | :-: | | searchEvent | false | Function | - | () => [] | search logic in this function | | clickEvent | false | Function | - | () => {} | list item click event | | keyWord | true | string | - | - | the item in list which return by the searchEvent, will contain the keyWord as one of the keys. if match, the value will display |

Event
Slot
Usage

<script lang="ts" setup>
import { ref } from 'vue'
import { xInputSearch } from 'x-components-plus'

const searchEvent = () => {
  return [
    {
      value: 1
    },
    {
      value: 2
    },
  ]
}
</script>
<template>
	<xInputSearch :keyWord="'value'"> </xInputSearch>
</template>

x-navLinkage

Props

type dataItem = {
    id: string,
    title: string,
    disabled?: boolean,
  }

Event
Slot

Usage

<script lang="ts" setup>
import { ref } from 'vue'
import { xNavLinkage } from 'x-components-plus'

const data = ref<any[]>([]);
for (let i = 0; i < 30; i++) {
  data.value.push({
    id: i.toString(),
    title: `title${i}`,
  });
}
</script>
<template>
	<xNavLinkage :data="data" :disabled="false">
    <template v-for="(item, index) in data" v-slot:[`xContent${item.id}`]="scoped">
      <div :key="item.id" :style="{ backgroundColor: `rgba(0, 0, 0, ${(10 - index * 3) / 10})`, width: '400px' }">
        <textarea name="" id="" :rows="index" :value="item.title"></textarea>
      </div>
    </template>
  </xNavLinkage>
</template>

x-portrait

Props

| name | required | type | Optional | default | tip| | :-: | :-: | :-: | :-: | :-: | :-: | | src | false | string | - | '' | image src |

Event
Slot

| name | returned parameters | tip | | :-: | :-: | :-: | | default | - | hover on the portrait, will display the sloted structure |

Usage

<script lang="ts" setup>
import { ref } from 'vue'
import { xPortrait } from 'x-components-plus'
</script>
<template>
	<xPortrait>
    <div class="portrait-container">
      <h1>portrait options</h1>
    </div>
  </xPortrait>
</template>

x-scroll

Props
Event

| name | tip| | :-: | :-: | | handleScrollY | (scrollTop) => {} |

Slot

| name | returned parameters | tip | | :-: | :-: | :-: | | default | - | the inner structure in the container |

Usage

<script lang="ts" setup>
import { ref } from 'vue'
import { xScroll } from 'x-components-plus'

const xScrollRef = ref();

xScrollRef.value.xScrollEvent({
  top: 0,
  left: 0,
});
</script>
<template>
	<xScroll ref="xScrollRef">
    <div v-for="item in 3" :key="item" style="width: 100px; height: 200px"></div>
  </xScroll>
</template>

x-select

Props

type optionsItemType = {
  label: string | number;
  value: string | number | boolean;
}

Event

| name | tip| | :-: | :-: | | update:modelValue | update modelValue | | change | (newValue, oldValue, optionsItem) => {} |

Slot
Usage

<script lang="ts" setup>
import { ref } from 'vue'
import { xSelect } from 'x-components-plus'

const value = ref('')
const options = ref([
	{
		label: '123wdq',
		value: 0,
	},
	{
		label: 'dwe',
		value: 1,
	},
	{
		label: 'da',
		value: 2,
	},
])
</script>
<template>
	<xSelect v-model="value" :options="options" :multiple="true">123</xSelect>
</template>

x-sort

Props

type DataType = {
	id: string;
	name: string;
}

Event
Slot

| name | returned parameters | tip | | :-: | :-: | :-: | | 'xSort' + DataType.id | item, index | slot in the item |

Usage

<script lang="ts" setup>
import { ref } from 'vue'
import { xSort } from 'x-components-plus'

const data = ref<any[]>([]);
for (let i = 0; i < 64; i++) {
  data.value.push({
    id: i + "",
    name: "item" + i,
  });
}
const xSortRef = ref();
const deleteItem = (scoped: any) => {
  xSortRef.value.deleteItem(scoped.item.id);
};
const addItem = (scoped: any, flag: boolean) => {
  const newItem = {
    id: data.value.length + "",
    name: "item" + data.value.length,
  }
  data.value.push(newItem);
  xSortRef.value.addItem(scoped.item.id, newItem, flag);
};
const width = ref(100);
const height = ref(30);
const getSortedData = () => {
  console.log(xSortRef.value.getSortedData())
}
</script>
<template>
  <xSort ref="xSortRef" :data="data" :direction="'row'" :item-width="width" :item-height="height"
    :span="8">
    <template v-for="(item, index) in data" v-slot:[`xSort${item.id}`]="scoped">
      <div :key="item.id" style="
        border: 1px solid #ccc;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0 5px;
      ">
        <span style="cursor: pointer" @click="addItem(scoped, false)">+</span>
        {{ item.name }}
        <span style="cursor: pointer" @click="addItem(scoped, true)">+</span>
        <span style="cursor: pointer" @click="deleteItem(scoped)">x</span>
      </div>
    </template>
  </xSort>
</template>

x-tab

Props

type dataType = {
  id: string;
  name: string;
}

| name | required | type | Optional | default | tip| | :-: | :-: | :-: | :-: | :-: | :-: | | data | true | dataType[] | - | - | the collection of tab items | | height | false | number | - | 30 | tab item height |

Event

| name | tip| | :-: | :-: | | addTab | (callback) => { const newItem = {...}; callback(newItem); } |

Slot

| name | returned parameters | tip | | :-: | :-: | :-: | | 'xNav' + dataType.id | - | slot in the tab item | | 'xContent' + dataType.id | - | slot in the container item | | xAddButton | - | slot in the add button |

Usage

<script lang="ts" setup>
import { ref } from 'vue'
import { xTab } from 'x-components-plus'

const data = ref<any[]>([]);
for (let i = 0; i < 1; i++) {
  data.value.push({
    id: i + "",
    name: "tab" + i,
  });
}
const xTabRef = ref();
const height = ref(30);
const addTab = (callback: Function) => {
  const newTab = {
    id: data.value.length,
    name: "tab" + data.value.length,
  };
  data.value.push(newTab);
  callback(newTab);
};
</script>
<template>
  <xTab :data="data" :height="height" ref="xTabRef" @add-tab="addTab">
    <template v-for="item in data" v-slot:[`xContent${item.id}`]="scoped">
      <div :key="item.id">this is tab content {{ item.name }}</div>
    </template>
  </xTab>
</template>

x-table

Props

type tablePropsItem = {
  prop?: string; (key name of item)
  label: string; (colum title)
  width?: number; (colum width)
  colspan?: number; (colum colspan)
  textAlign?: 'left' | 'center' | 'right'; (content layout)
  children?: tablePropsItem[]; (subscript level title)
  isSlot?: boolean; (need to insert content by writer)
  fixed?: boolean; (fixed colum)
}

Event
Slot

| name | returned parameters | tip | | :-: | :-: | :-: | | tablePropsItem.prop | prop, row, rowIndex, colIndex | slot in the table cell content |

Usage

<script lang="ts" setup>
import { ref } from 'vue'
import { xTable } from 'x-components-plus'

const tableProps = ref([
  {
    prop: "name",
    label: "名字",
    width: 150,
    isSlot: true,
    // fixed: true,
  },
  {
    prop: "age",
    label: "年龄",
  },
  {
    label: "地址",
    width: 250,
    children: [
      {
        prop: "p",
        label: "省份",
        width: 150,
      },
      {
        label: "城市",
        width: 100,
        children: [
          {
            prop: "q",
            label: "区",
            width: 50,
          },
          {
            label: "镇",
            children: [
              {
                prop: "c",
                label: "村",
                width: 50,
              },
              {
                prop: "z",
                label: "组",
                width: 150,
              },
            ],
          },
        ],
      },
    ],
  },
]);
const tableData = ref([
  {
    name: "Bob",
    age: "18",
    address: "武汉市",
    p: "p1fwfew",
    q: "q1",
    z: "z1fwefgrgrgt",
    c: "c1cwecwefwev",
  },
  {
    name: "小明",
    age: "30",
    address: "北京市",
    p: "p2",
    q: "q2fewfwefw",
    z: "z2grgrtgr",
    c: "c2",
  },
  {
    name: "小明",
    age: "30",
    address: "北京市",
    p: "p2",
    q: "q2fewfwefw",
    z: "z2grgrtgr",
    c: "c2",
  }
])
</script>
<template>
  <xTable
    :tableProps="tableProps"
    :tableHeight="400"
    :tableWidth="900"
    :tableData="tableData"
  >
    <template #name="scoped">
      name: {{ scoped.prop }}
    </template>
  </xTable>
</template>

x-tooltip

Props

| name | required | type | Optional | default | tip| | :-: | :-: | :-: | :-: | :-: | :-: | | placement | false | string | top, bottom, left, right | top | display direction | | content | false | string | - | '' | tip content | | modelValue | false | boolean | true, false | false | control the tooltip display | | from | false | string | - | common | a params for the v-showSpanTooltip | | width | false | string | - | 150px | tooltip width | | mouseenterCallback | false | Function | - | () => {} | when mouseenter, will callback this function | | mouseleaveCallback | false | Function | - | () => {} | when mouseleave, will callback this function |

Event
Slot

| name | returned parameters | tip | | :-: | :-: | :-: | | default | trigger element | | tip | tip content |

Usage

<script lang="ts" setup>
import { xTooltip } from 'x-components-plus'
</script>
<template>
  <xTooltip
    ref="xTooltipRef"
    :content="tooltip show"
  >
    <h3>hover me</h3>
  </xTooltip>
</template>

x-tree

Props

type xTreeDataItem = {
  [prop: string | number]: any;
  children?: xTreeDataItem[];
}

Event

| name | tip| | :-: | :-: | | change | (newValue, oldValue, changedItem, level, callbackData) => { } | | labelClick | (clickedItem) => { } |

Slot

| name | returned parameters | tip | | :-: | :-: | :-: | | label | - | tree item label |

Usage

<script lang="ts" setup>
import { xTree } from 'x-components-plus'

const treeChange = (
	nv: boolean,
	ov: boolean,
	treenode: any,
	level: number,
	callbackData: Record<string, any>
) => {
	console.log(
		nv,
		ov,
		treenode,
		level,
		callbackData.getSelectedRoot,
		callbackData.getSelectedFinal
	)
}
const treeData = ref([
	{
		label: '1',
		value: '1',
		children: [
			{
				label: '1-1',
				value: '1-1',
			},
			{
				label: '1-2',
				value: '1-2',
				children: [],
			},
		],
	},
	{
		label: '2',
		value: '2',
	},
	{
		label: '3',
		value: '3',
		children: [
			{
				label: '3-1',
				value: '3-1',
				children: [
					{
						label: '3-1-1',
						value: '3-1-1',
						children: [
							{
								label: '3-1-1-1',
								value: '3-1-1-1',
								children: [],
							},
							{
								label: '3-1-1-2',
								value: '3-1-1-2',
								children: [],
							},
							{
								label: '3-1-1-3',
								value: '3-1-1-3',
								children: [],
							},
						],
					},
					{
						label: '3-1-2',
						value: '3-1-2',
					},
				],
			},
			{
				label: '3-2',
				value: '3-2',
				children: [
					{
						label: '3-2-1',
						value: '3-2-1',
						children: [
							{
								label: '3-2-1-1',
								value: '3-2-1-1',
								children: [],
							},
							{
								label: '3-2-1-2',
								value: '3-2-1-2',
								children: [],
							},
							{
								label: '3-2-1-3',
								value: '3-2-1-3',
								children: [],
							},
						],
					},
					{
						label: '3-2-2',
						value: '3-2-2',
					},
				],
			},
		],
	},
])
</script>
<template>
	<xTree
		:data="treeData"
		:treeKey="'value'"
		:treeLabel="'label'"
		:selected="['2', '3-1-1']"
		@change="treeChange"
		getSelectedRoot
		getSelectedFinal
	></xTree>
</template>

x-virtualList

Props

type orderItem = {
  prop: string; (key of item)
  width?: number | string;
}

| name | required | type | Optional | default | tip| | :-: | :-: | :-: | :-: | :-: | :-: | | listOrder | true | orderItem[] | - | [] | list title | | listData | true | Record<string, any>[] | - | [] | list body data | | height | false | number | - | 500 | list height | | lineHeight | false | number | - | 50 | list item height | | activeKey | false | string | - | - | one of keys of listData item | | activeValues | false | any[] | - | - | collection of activeValue of listData item |

Event

| name | tip| | :-: | :-: | | change | (dataItem, dataIndex, orderItem, orderIndex) => { } |

Slot

| name | returned parameters | tip | | :-: | :-: | :-: | | orderItem.prop | row, index, lineIndex, xVirtualListRefScrollTop | tree item label |

Usage

<script lang="ts" setup>
import { xVirtualList } from 'x-components-plus'
import { ref } from "vue";

const listOrder = ref([
  {
    prop: "p1",
    width: "100%",
  },
  {
    prop: "p2",
    width: "100%",
  },
  {
    prop: "p3",
    width: "100%",
  },
]);
const key = ref(0);
const listData = ref<any>([]);
const setData = () => {
  listData.value = [];
  for (let index = 0; index < 100; index++) {
    listData.value.push({
      p1: "index：" + index,
      p2: index,
      p3: index % 2,
    });
  }
  key.value++;
};

setData();
</script>
<template>
  <xVirtualList
    style="margin: 30px; border: 1px #ddd solid"
    :listOrder="listOrder"
    :listData="listData"
    :lineHeight="45"
    :height="380"
    :key="key"
  >
    <template #p2="scoped">
      <xButton @click="add(scoped.row)">按钮</xButton>
    </template>
    <template #p3="scoped">
      <xInput v-model="scoped.row.p3" />
    </template>
  </xVirtualList>
</template>

x-message

Props

| name | required | type | Optional | default | tip| | :-: | :-: | :-: | :-: | :-: | :-: | | message | true | string, number | - | '' | the message of tip | | during | false | number | - | 2000 | delay time |

Usage

<script lang="ts" setup>
xMessage({
  message: response.message,
  during: 1000,
});
</script>

x-prompt

Props

| name | required | type | Optional | default | tip| | :-: | :-: | :-: | :-: | :-: | :-: | | title | true | number, string | - | - | prompt title | | message | true | number, string | - | - | prompt message | | confirmText | true | string | - | - | confirm button text | | cancelText | true | string | - | - | cancel button text |

Usage

<script lang="ts" setup>
xPrompt({
  title: "Tip",
  message: "Please confirm",
  confirmText: "Confirm",
  cancelText: "Cancel",
}).then(() => {
  console.log("Confirm!")
}).catch(() => {
  console.log("Cancel!")
})
</script>

Use of Directives

loadding

<script lang="ts" setup>
import { ref } from "vue";
import { loadding } from "x-components-plus"

const vLoadding = loadding
const loaddingShow = ref(true)
</script>
<template>
  <div v-loadding="loaddingShow"></div>
</template>

pageCut

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { pageCut } from "x-components-plus"

const vPageCut = pageCut
const pageCutObj = reactive({
	callback: (blob: Blob) => {
		pageCutShow.value = false
    console.log(blob)
	},
	errorCallback: (val: boolean) => {
		pageCutShow.value = false
		console.log(val)
	},
})
const pageCutShow = ref(false)
document.addEventListener('click', () => {
  pageCutShow.value = true
})
</script>
<template>
  <div v-pageCut:[pageCutObj]="pageCutShow"></div>
</template>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Install

Use of Components

x-row

x-col

x-button

x-calendar

x-carouselChart

x-checkbox

x-checkboxGroup

x-dialog

x-input

x-inputSearch

x-navLinkage

x-portrait

x-scroll

x-select

x-sort

x-tab

x-table

x-tooltip

x-tree

x-virtualList

x-message

x-prompt

Use of Directives

loadding

pageCut