c-plugin-vue3 v1.0.0

c-plugin-vue3

安装教程

1. npm install c-plugin-vue3

使用说明

1. 在main.js中引入并使用插件

import cPlugin from 'c-plugin-vue3'
import themes from '@/theme.json' //系统主题
Vue.use(cPlugin,{
	themes,
	"color": {//组件颜色
		"main": "#58DAD0",
		"minor": "#d2f1ef",
		"success": "#4cd964",
		"error": "#DE4F4F",
		"warning": "#FFA216",
		"grey": "#999",
	},
	"inputStyle": {
		"height": "80rpx",
		"isBorder": false,
		"borderStyle": "solid",
		"borderColor": "#f0f0f0",
		"focusBorderColor": "#1677FF",
		"background": "",
		"radius": "44rpx"
	},
	"btnStyle": {
		"radius": "32rpx",
		"color": "#fff",
		"background": "main"
	},
	"footStyle": {
		"height": "80rpx",
		"color": "#fff",
		"background": "#fff",
		"padding": "10rpx 30rpx 0rpx 30rpx",
		"jc": "",
		"isBoxShadow": true
	}
})

2. 注册组件 pages.json 中

 "easycom": {
		"autoscan": true,
		"custom": {
			"^c-(.*)": "@/c-plugin/lib/components/c-$1.vue",
		}
	}

3. 在页面中如何使用

 <c-btn>111</c-btn>
<c-btn
  background="#126514"
  color="#000"
  width="200rpx"
  height="100rpx"
  radius="100rpx"
  >222</c-btn
>
<c-box ggclass="mg_t30" :background="img">
  <c-row>
    <c-btn>111</c-btn>
    <c-btn>111</c-btn>
  </c-row>
</c-box>
<c-box
  background="https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"
>
  <c-row>
    <c-btn>111</c-btn>
    <c-btn>111</c-btn>
  </c-row>
</c-box>

<c-check v-model="check"><c-text>1212</c-text></c-check>
<c-checkbox v-model="check"><c-text>56456</c-text></c-checkbox>

<c-hint></c-hint>
<c-table :list="list">
  <c-column label="编号" prop="id"></c-column>
  <c-column label="名称" prop="name"></c-column>
  <c-column label="年龄" prop="age"></c-column>
  <c-column label="性别" prop="gender"></c-column>
  <c-column label="电话" prop="phone" width="150"></c-column>
  <c-column label="位置" prop="pos"></c-column>
</c-table>
<c-box>
  <c-view>{{ p }}</c-view>
  <c-text>{{ p }}</c-text>
  <c-text>{{ p }}</c-text>
  <c-text>{{ p }}</c-text>
</c-box>
<c-view>{{ p }}</c-view>
<c-view>
  <c-text>{{ p }}</c-text>
  <c-text>{{ p }}</c-text>
  <c-text>{{ p }}</c-text>
</c-view>

<c-image
  src="/static/img/hint.png"
  width="100rpx"
  height="100rpx"
  isPreview
></c-image>
<c-image
  isPreview
  src="https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"
  width="100rpx"
  height="100rpx"
  preview
></c-image>
<c-view>{{ date }}</c-view>
<c-view>{{ date1 }}</c-view>
{{ $t("js.desc") }}
<c-text ggclass="mg_t30" class="" :content="$t('js.desc')">
  {{ $t("js.desc") }}
  {{ locale }}
</c-text>
<c-row>
  <c-btn @click="cutP">切换模式</c-btn>
  <c-btn @click="cutLang">切换语言</c-btn>
</c-row>
<c-foot ref="foot">
  12131321564564
  <c-text>{{ p }}</c-text>
</c-foot>