vuv-ui 1.0.7 → 1.0.8

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "vuv-ui",
   "private": false,
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "基于UVUI 组件再次封装",
   "type": "module",
   "author": "lsq",
   "files": [
     "vuv-ui",
-    "vuv-ui/**"
+    "vuv-ui/**",
+    "src",
+    "src/**"
   ],
   "scripts": {
     "dev": "vite",
@@ -19,7 +21,7 @@
   },
   "exports": {
     ".": {
-      "import": "./vuv-ui/vuv-ui.es.js",
+      "import": "./src/components/index.ts",
       "require": "./vuv-ui/vuv-ui.umd.js",
       "types": "./vuv-ui/src/components/index.d.ts"
     },
@@ -33,7 +35,7 @@
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",
     "@types/node": "^24.12.2",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "4.0.0",
     "@vue/compiler-sfc": "3.2.45",
     "@vue/tsconfig": "^0.9.1",
     "npm-run-all2": "^8.0.4",

package/src/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <h1>You did it!</h1>
+    <p>
+      Visit
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a>
+      to read the documentation
+    </p>
+    <uv-button>默认按钮</uv-button>
+    <el-switch v-model="hairline"></el-switch>
+
+    <Data></Data>
+  </div>
+</template>
+<script setup lang="ts">
+import uvButton from './components/button/View.vue';
+import Data from './components/button/Data.vue';
+// import { uvButton } from 'uv-ui';
+import { ref } from 'vue';
+const hairline = ref(true);
+</script>
+
+<style scoped></style>

package/src/components/button/Data.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="banner-content" v-if="isShow">
+    <el-form label-width="100px">
+      <el-form-item label="显示边框">
+        <el-switch v-model="options.hairline"></el-switch>
+      </el-form-item>
+      <el-form-item label="宽度">
+        <el-input-number v-model="options.width"></el-input-number>
+      </el-form-item>
+      <el-form-item label="高度">
+        <el-input-number v-model="options.height"></el-input-number>
+      </el-form-item>
+      <el-form-item label="主题颜色">
+        <el-select v-model="options.type" placeholder="请选择" style="width: 180px">
+          <el-option label="primary" value="primary" />
+          <el-option label="success" value="success" />
+          <el-option label="info" value="info" />
+          <el-option label="warning" value="warning" />
+          <el-option label="error" value="error" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="大小">
+        <el-radio-group v-model="options.size">
+          <el-radio-button label="normal">normal</el-radio-button>
+          <el-radio-button label="medium">medium</el-radio-button>
+          <el-radio-button label="mini">mini</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="按钮位置">
+        <el-radio-group v-model="options.position">
+          <el-radio-button label="left">居左</el-radio-button>
+          <el-radio-button label="center">居中</el-radio-button>
+          <el-radio-button label="right">居右</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="形状">
+        <el-radio-group v-model="options.shape">
+          <el-radio-button label="square">square</el-radio-button>
+          <el-radio-button label="circle">circle</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="镂空">
+        <el-switch v-model="options.plain"></el-switch>
+      </el-form-item>
+      <el-form-item label="禁用">
+        <el-switch v-model="options.disabled"></el-switch>
+      </el-form-item>
+      <el-form-item label="铺满">
+        <el-switch v-model="options.fill"></el-switch>
+      </el-form-item>
+      <el-form-item label="loading图标">
+        <el-switch v-model="options.loading"></el-switch>
+      </el-form-item>
+      <el-form-item label="加载中文字">
+        <el-input v-model="options.loadingText" style="width: 180px" placeholder="请输入" clearable />
+      </el-form-item>
+
+      <el-form-item label="开放能力">
+        <el-select v-model="options.openType" placeholder="请选择" style="width: 180px" clearable>
+          <el-option label="跳转页面" value="navigateTo" />
+          <el-option label="获取用户信息" value="getUserInfo" />
+          <el-option label="联系客服" value="contact" />
+          <el-option label="获取手机号" value="getPhoneNumber" />
+          <el-option label="打开授权设置" value="openSetting" />
+          <el-option label="获取用户头像" value="chooseAvatar" />
+          <el-option label="意见反馈" value="feedback" />
+          <el-option label="分享" value="share" />
+          <el-option label="自定义" value="customize" />
+        </el-select>
+      </el-form-item>
+
+      <!-- 页面路径 -->
+      <el-form-item label="页面路径" v-if="options.openType == 'navigateTo'">
+        <el-input v-model="options.pagePath" style="width: 180px" placeholder="请输入" clearable />
+      </el-form-item>
+      <!-- 是否tabbar页面 -->
+      <el-form-item label="tabbar页面" v-if="options.openType == 'navigateTo'">
+        <el-switch v-model="options.isTabBar"></el-switch>
+      </el-form-item>
+
+      <el-form-item label="按钮文字">
+        <el-input v-model="options.text" style="width: 180px" placeholder="请输入" clearable />
+      </el-form-item>
+      <!-- <el-form-item label="按钮图标">
+        <el-input v-model="options.icon" style="width: 180px" placeholder="请输入" clearable />
+      </el-form-item> -->
+      <el-form-item label="按钮颜色">
+        <el-color-picker v-model="options.color" show-alpha />
+      </el-form-item>
+      <el-form-item label="文字颜色">
+        <el-color-picker v-model="options.textColor" show-alpha />
+      </el-form-item>
+      <el-form-item label="自定义样式">
+        <el-input v-model="options.customStyle" style="width: 240px" placeholder="分号分隔，如width: 100px;height: 50px;" type="textarea" clearable />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts" name="ButtonData">
+import { ref, onMounted } from 'vue';
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+});
+
+const options = ref();
+const data = ref();
+const isShow = ref(false);
+
+onMounted(() => {
+  console.log(props.data, props, '参数接收');
+  if (props.data) {
+    data.value = props.data.data;
+    options.value = props.data.options;
+    isShow.value = true;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.banner-content {
+  overflow-x: auto;
+}
+.item-list {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px;
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  padding: 5px;
+
+  .l-info {
+    font-size: 12px;
+    padding-top: 4px;
+    width: calc(100% - 100px);
+
+    p {
+      margin: 5px 0 0;
+      white-space: nowrap;
+      overflow: hidden;
+      display: flex;
+
+      .link {
+        color: #1b8bff;
+        cursor: pointer;
+      }
+
+      .text {
+        white-space: nowrap;
+        text-align: -webkit-auto;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .r-image {
+    text-align: right;
+
+    .el-icon-close {
+      color: #999;
+      font-size: 12px;
+      font-weight: 600;
+      margin-bottom: 6px;
+      cursor: pointer;
+
+      &:hover {
+        color: red;
+      }
+    }
+
+    .image-box {
+      width: 100px;
+      height: 70px;
+      border-radius: 5px;
+      overflow: hidden;
+      position: relative;
+      background: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        max-width: 100%;
+      }
+
+      .placeholder-text {
+        color: #999;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.mt-5px {
+  margin-top: 5px;
+}
+
+.mt-10px {
+  margin-top: 10px;
+}
+</style>

package/src/components/button/View.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="button_box" v-if="data && data.options" :class="{ plain: data.options.plain }" :style="{ 'justify-content': data.options.position }">
+    <uv-button
+      :type="data.options.type || 'primary'"
+      :bgColor="data.options.color"
+      :disabled="data.options.disabled"
+      :color="data.options.textColor"
+      :round="data.options.shape == 'circle' ? true : false"
+      :square="data.options.shape == 'square' ? true : false"
+      :size="data.options.size"
+      :loading="data.options.loading"
+      :icon="data.options.icon"
+      :style="{
+        width: data.options.width + 'px',
+        height: data.options.height + 'px'
+      }"
+    >
+      {{ data.options.text || '按钮' }}
+    </uv-button>
+  </div>
+</template>
+
+<script setup lang="ts" name="ButtonView">
+import { uvButton } from 'uv-ui';
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+// 提取data.options.customStyle 样式
+
+.button_box {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.button_box:deep(.uv-button) {
+  width: 100%;
+  height: 100%;
+}
+
+.plain:deep(.uv-button) {
+  background-color: transparent !important;
+}
+</style>

package/src/components/button/index.ts

@@ -0,0 +1,41 @@
+import ButtonView from './View.vue';
+import ButtonData from './Data.vue';
+
+const buttonTypeList = {
+  type: 'uvui-button',
+  name: '按钮',
+  icon: 'Postcard',
+  fontIcon: 'icon-shangpinanniu_changtiaoanniu',
+  page: 'index,activity',
+  viewCom: ButtonView,
+  editCom: ButtonData,
+  limit: 0
+};
+
+const buttonOptions = {
+  data: {},
+  options: {
+    width: '100', //宽度
+    height: '45', //高度
+    hairline: true, //是否显示边框
+    type: 'primary', //主题颜色
+    size: 'normal', //大小
+    shape: 'square', //形状
+    position: 'left', //按钮位置
+    plain: false, //镂空
+    disabled: false, //禁用
+    loading: false, //loading图标
+    loadingText: '', //加载中文字
+    openType: 'navigateTo', //开放能力
+    pagePath: '', //页面路径
+    isTabBar: false, //是否tabbar页面
+    text: '', //按钮文字
+    textColor: '#ffffff', //按钮文字颜色
+    icon: '', //按钮图标
+    color: '', //按钮颜色
+    customStyle: '', //自定义样式
+    fill: true //组件是否铺满父容器
+  }
+};
+
+export { buttonTypeList, buttonOptions };

package/src/components/collapse/Data.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="banner-content" v-if="isShow">
+    <el-form label-width="100px">
+      <el-form-item label="是否铺满">
+        <el-switch v-model="options.fill"></el-switch>
+      </el-form-item>
+    </el-form>
+
+    <el-button type="primary" @click="addItem" class="mt-10px">添加项</el-button>
+    <div class="item-list" v-for="(item, index) in data.list" :key="index">
+      <div class="l-info">
+        <div class="mt-5px">
+          <span>标题：</span>
+          <el-input v-model="item.title" style="width: 180px" placeholder="请输入" clearable />
+        </div>
+        <div class="mt-5px">
+          <span>内容：</span>
+          <el-input v-model="item.value" style="width: 180px" placeholder="请输入" clearable />
+        </div>
+        <div class="mt-5px">
+          <span>描述：</span>
+          <el-input v-model="item.label" style="width: 180px" placeholder="请输入" clearable />
+        </div>
+        <div class="mt-5px">
+          <span>禁用：</span>
+          <el-switch v-model="item.disabled"></el-switch>
+        </div>
+        <div class="mt-5px">
+          <span>右箭头：</span>
+          <el-switch v-model="item.isLink"></el-switch>
+        </div>
+        <div class="mt-5px">
+          <span>点击反馈：</span>
+          <el-switch v-model="item.clickable"></el-switch>
+        </div>
+        <div class="mt-5px">
+          <span>显示内边框：</span>
+          <el-switch v-model="item.border"></el-switch>
+        </div>
+        <div class="mt-5px">
+          <el-button type="danger" @click="removeItem(index)" size="small">删除</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="CollapseData">
+import { ref, onMounted } from 'vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+});
+
+const options = ref();
+const data = ref();
+const isShow = ref(false);
+
+const removeItem = (index: number | string) => {
+  data.value.list.splice(index, 1);
+};
+
+const addItem = () => {
+  data.value.list.push({
+    title: '面板标题', //	面板标题
+    value: '右侧内容', //标题右侧内容
+    label: '', //标题下方的描述信息
+    disabled: false, //是否禁止面板的展开和收起
+    isLink: true, //是否展示右侧箭头并开启点击反馈
+    clickable: true, //是否开启点击反馈
+    border: true //是否显示内边框
+  });
+};
+
+onMounted(() => {
+  if (props.data) {
+    data.value = props.data.data;
+    options.value = props.data.options;
+    isShow.value = true;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.banner-content {
+  overflow-x: auto;
+}
+.item-list {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px;
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  padding: 5px;
+
+  .l-info {
+    font-size: 12px;
+    padding-top: 4px;
+    width: calc(100% - 100px);
+
+    p {
+      margin: 5px 0 0;
+      white-space: nowrap;
+      overflow: hidden;
+      display: flex;
+
+      .link {
+        color: #1b8bff;
+        cursor: pointer;
+      }
+
+      .text {
+        white-space: nowrap;
+        text-align: -webkit-auto;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .r-image {
+    text-align: right;
+
+    .el-icon-close {
+      color: #999;
+      font-size: 12px;
+      font-weight: 600;
+      margin-bottom: 6px;
+      cursor: pointer;
+
+      &:hover {
+        color: red;
+      }
+    }
+
+    .image-box {
+      width: 100px;
+      height: 70px;
+      border-radius: 5px;
+      overflow: hidden;
+      position: relative;
+      background: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        max-width: 100%;
+      }
+
+      .placeholder-text {
+        color: #999;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.mt-5px {
+  margin-top: 5px;
+}
+
+.mt-10px {
+  margin-top: 10px;
+}
+</style>

package/src/components/collapse/View.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="cell_box" v-if="data && data.options">
+    <uv-collapse v-model="list">
+      <uv-collapse-item v-for="(item, index) in collapseList" :key="index" :name="item.title + '_' + index">
+        <template #title>{{ item.title }}</template>
+        <template #right>{{ item.value }}</template>
+        {{ item.label }}
+      </uv-collapse-item>
+    </uv-collapse>
+  </div>
+</template>
+
+<script setup lang="ts" name="CollapseView">
+import { ref, computed } from 'vue';
+import { uvCollapse, uvCollapseItem } from 'uv-ui';
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+});
+
+const list = ref([]);
+
+const collapseList = computed(() => {
+  if (props.data.data && props.data.data.list) {
+    list.value = props.data.data.list.map((item: any, index: number) => item.title + '_' + index);
+    return props.data.data.list;
+  }
+  return [];
+});
+</script>
+
+<style lang="scss" scoped>
+.cell_box {
+}
+</style>

package/src/components/collapse/index.ts

@@ -0,0 +1,34 @@
+import CollapseView from './View.vue';
+import CollapseData from './Data.vue';
+
+const collapseTypeList = {
+  type: 'uvui-collapse',
+  name: '折叠面板',
+  icon: 'Postcard',
+  fontIcon: 'icon-danyuange1',
+  page: 'index,activity',
+  viewCom: CollapseView,
+  editCom: CollapseData,
+  limit: 0
+};
+
+const collapseOptions = {
+  data: {
+    list: [
+      {
+        title: '面板标题', //	面板标题
+        value: '右侧内容', //标题右侧内容
+        label: '', //标题下方的描述信息
+        disabled: false, //是否禁止面板的展开和收起
+        isLink: true, //是否展示右侧箭头并开启点击反馈
+        clickable: true, //是否开启点击反馈
+        border: true //是否显示内边框
+      }
+    ]
+  },
+  options: {
+    fill: false //组件是否铺满父容器
+  }
+};
+
+export { collapseTypeList, collapseOptions };

package/src/components/index.ts

@@ -0,0 +1,14 @@
+import { buttonTypeList, buttonOptions } from './button/index';
+import { textareaTypeList, textareaOptions } from './textarea/index';
+import { numberBoxTypeList, numberBoxOptions } from './numberBxo/index';
+import { collapseTypeList, collapseOptions } from './collapse/index';
+
+export const uvUiList = { buttonTypeList, textareaTypeList, numberBoxTypeList, collapseTypeList };
+export const uvUIOptions = { buttonOptions, textareaOptions, numberBoxOptions, collapseOptions };
+
+const hsryvvuUI = {
+  uvUiList,
+  uvUIOptions
+};
+
+export default hsryvvuUI;

package/src/components/numberBxo/Data.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="banner-content" v-if="isShow">
+    <el-form label-width="120px">
+      <el-form-item label="当前值">
+        <el-input-number v-model="options.value" :min="options.min" :max="options.max" :step="options.step" />
+      </el-form-item>
+
+      <el-form-item label="最小值">
+        <el-input-number v-model="options.min" />
+      </el-form-item>
+      <el-form-item label="最大值">
+        <el-input-number v-model="options.max" />
+      </el-form-item>
+      <el-form-item label="步长">
+        <el-input-number v-model="options.step" :min="0" :precision="2" />
+      </el-form-item>
+      <el-form-item label="只能正整数">
+        <el-switch v-model="options.integer"></el-switch>
+      </el-form-item>
+      <el-form-item label="禁用操作">
+        <el-switch v-model="options.disabled"></el-switch>
+      </el-form-item>
+      <el-form-item label="禁止输入框">
+        <el-switch v-model="options.disabledInput"></el-switch>
+      </el-form-item>
+      <el-form-item label="输入框宽度(px)">
+        <el-input-number v-model="options.inputWidth" :min="20" :max="200" />
+      </el-form-item>
+      <el-form-item label="显示减少按钮">
+        <el-switch v-model="options.showMinus"></el-switch>
+      </el-form-item>
+      <el-form-item label="显示增加按钮">
+        <el-switch v-model="options.showPlus"></el-switch>
+      </el-form-item>
+      <el-form-item label="小数位数">
+        <el-input-number v-model="options.decimalLength" :min="0" :max="10" />
+      </el-form-item>
+      <el-form-item label="允许长按">
+        <el-switch v-model="options.longPress"></el-switch>
+      </el-form-item>
+      <el-form-item label="文字颜色">
+        <el-color-picker v-model="options.color" show-alpha />
+      </el-form-item>
+      <el-form-item label="按钮大小(px)">
+        <el-input-number v-model="options.buttonSize" :min="20" :max="100" />
+      </el-form-item>
+      <el-form-item label="背景颜色">
+        <el-color-picker v-model="options.bgColor" show-alpha />
+      </el-form-item>
+      <el-form-item label="禁用增加按钮">
+        <el-switch v-model="options.disablePlus"></el-switch>
+      </el-form-item>
+      <el-form-item label="禁用减少按钮">
+        <el-switch v-model="options.disableMinus"></el-switch>
+      </el-form-item>
+      <el-form-item label="对齐方式">
+        <el-radio-group v-model="options.align">
+          <el-radio-button label="left">左对齐</el-radio-button>
+          <el-radio-button label="center">居中对齐</el-radio-button>
+          <el-radio-button label="right">右对齐</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="铺满">
+        <el-switch v-model="options.fill"></el-switch>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts" name="NumberBoxData">
+import { ref, onMounted } from 'vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+});
+
+const options = ref();
+const data = ref();
+const isShow = ref(false);
+
+onMounted(() => {
+  console.log(props.data, props, '参数接收');
+  if (props.data) {
+    data.value = props.data.data;
+    options.value = props.data.options;
+    isShow.value = true;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.banner-content {
+  overflow-x: auto;
+}
+</style>

package/src/components/numberBxo/View.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="number-box-wrapper" v-if="data && data.options" :style="{ 'justify-content': data.options.align }">
+    <uv-stepper
+      :min="data.options.min"
+      v-model="setpperValue"
+      :max="data.options.max"
+      :integer="data.options.integer"
+      :disabled="true"
+      :inputWidth="data.options.inputWidth + 'px'"
+      :step="data.options.step"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" name="NumberBoxView">
+import { ref, watch } from 'vue';
+import { uvStepper } from 'uv-ui';
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+});
+const setpperValue = ref(1);
+watch(
+  () => props.data.options,
+  (val) => {
+    setpperValue.value = val;
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.number-box-wrapper {
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+}
+</style>

package/src/components/numberBxo/index.ts

@@ -0,0 +1,40 @@
+import NumberBoxView from './View.vue';
+import NumberBoxData from './Data.vue';
+
+const numberBoxTypeList = {
+  type: 'uvui-numberBox',
+  name: '步进器',
+  icon: 'Postcard',
+  fontIcon: 'icon-shangpinanniu_changtiaoanniu',
+  page: 'index,activity',
+  viewCom: NumberBoxView,
+  editCom: NumberBoxData,
+  limit: 0
+};
+
+const numberBoxOptions = {
+  data: {},
+  options: {
+    value: 1, // 用于双向绑定的值
+    min: 1, // 最小值
+    max: Number.MAX_SAFE_INTEGER, // 最大值
+    step: 1, // 步长
+    integer: false, // 是否只能输入正整数
+    disabled: false, // 是否禁用操作
+    disabledInput: false, // 是否禁止输入框
+    inputWidth: 35, // 输入框宽度
+    showMinus: true, // 是否显示减少按钮
+    showPlus: true, // 是否显示增加按钮
+    decimalLength: 0, // 显示的小数位数
+    longPress: true, // 是否允许长按进行加减
+    color: '#323233', // 输入框文字和加减按钮图标的颜色
+    buttonSize: 30, // 按钮大小
+    bgColor: '#EBECEE', // 输入框和按钮的背景颜色
+    disablePlus: false, // 是否禁用增加按钮
+    disableMinus: false, // 是否禁用减少按钮
+    align: 'left', // 对齐方式
+    fill: false //是否铺满
+  }
+};
+
+export { numberBoxTypeList, numberBoxOptions };

package/src/components/textarea/Data.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="banner-content" v-if="isShow">
+    <el-form label-width="100px">
+      <el-form-item label="空值占位内容">
+        <el-input v-model="options.placeholder"></el-input>
+      </el-form-item>
+      <el-form-item label="高度">
+        <el-input-number v-model="options.height"></el-input-number>
+      </el-form-item>
+      <el-form-item label="右下角按钮文字">
+        <el-input v-model="options.confirmType"></el-input>
+      </el-form-item>
+      <el-form-item label="显示字数统计">
+        <el-switch v-model="options.count"></el-switch>
+      </el-form-item>
+      <el-form-item label="自动增高">
+        <el-switch v-model="options.autoHeight"></el-switch>
+      </el-form-item>
+      <el-form-item label="显示完成按钮">
+        <el-switch v-model="options.showConfirmBar"></el-switch>
+      </el-form-item>
+      <el-form-item label="输入长度">
+        <el-input-number v-model="options.maxlength"></el-input-number>
+      </el-form-item>
+      <el-form-item label="是否铺满">
+        <el-switch v-model="options.fill"></el-switch>
+      </el-form-item>
+      <el-form-item label="边框">
+        <el-radio-group v-model="options.size">
+          <el-radio-button label="surround">四周边框</el-radio-button>
+          <el-radio-button label="none">无边框</el-radio-button>
+          <el-radio-button label="bottom">底部边框</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="自定义样式">
+        <el-input v-model="options.customStyle" style="width: 240px" placeholder="分号分隔，如width: 100px;height: 50px;" type="textarea" clearable />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts" name="TextareaData">
+import { ref, onMounted } from 'vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+});
+
+const options = ref();
+const data = ref();
+const isShow = ref(false);
+
+onMounted(() => {
+  console.log(props.data, props, '参数接收');
+  if (props.data) {
+    data.value = props.data.data;
+    options.value = props.data.options;
+    isShow.value = true;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.banner-content {
+  overflow-x: auto;
+}
+.item-list {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px;
+  border: 1px solid #c8c8c8;
+  border-radius: 4px;
+  padding: 5px;
+
+  .l-info {
+    font-size: 12px;
+    padding-top: 4px;
+    width: calc(100% - 100px);
+
+    p {
+      margin: 5px 0 0;
+      white-space: nowrap;
+      overflow: hidden;
+      display: flex;
+
+      .link {
+        color: #1b8bff;
+        cursor: pointer;
+      }
+
+      .text {
+        white-space: nowrap;
+        text-align: -webkit-auto;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .r-image {
+    text-align: right;
+
+    .el-icon-close {
+      color: #999;
+      font-size: 12px;
+      font-weight: 600;
+      margin-bottom: 6px;
+      cursor: pointer;
+
+      &:hover {
+        color: red;
+      }
+    }
+
+    .image-box {
+      width: 100px;
+      height: 70px;
+      border-radius: 5px;
+      overflow: hidden;
+      position: relative;
+      background: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        max-width: 100%;
+      }
+
+      .placeholder-text {
+        color: #999;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+.mt-5px {
+  margin-top: 5px;
+}
+
+.mt-10px {
+  margin-top: 10px;
+}
+</style>

package/src/components/textarea/View.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="textarea_box" v-if="data && data.options">
+    <el-input
+      v-model="textarea"
+      :placeholder="data.options.placeholder || '请输入'"
+      :style="{ width: '100%', height: data.options.height }"
+      :show-word-limit="data.options.count"
+      :autosize="data.options.autoHeight"
+      :maxlength="data.options.maxlength"
+      :rows="2"
+      type="textarea"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" name="TextareaView">
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  }
+});
+const textarea = ref('');
+</script>
+
+<style lang="scss" scoped>
+// 提取data.options.customStyle 样式
+
+.textarea_box {
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+</style>

package/src/components/textarea/index.ts

@@ -0,0 +1,31 @@
+import TextareaView from './View.vue';
+import TextareaData from './Data.vue';
+
+const textareaTypeList = {
+  type: 'uvui-textarea',
+  name: '文本域',
+  icon: 'Textarea',
+  fontIcon: 'icon-24gl-grid',
+  page: 'index,activity',
+  viewCom: TextareaView,
+  editCom: TextareaData,
+  limit: 0
+};
+const textareaOptions = {
+  type: 'uvui-textarea',
+  data: {},
+  options: {
+    placeholder: '请输入', //空值占位内容
+    height: '70', //高度
+    confirmType: 'done', //右下角按钮文字
+    count: false, //是否显示字数统计
+    autoHeight: false, //是否自动增高
+    showConfirmBar: false, //是否显示”完成“按钮那一栏
+    maxlength: 140, //最大输入长度
+    border: 'surround', //边框，surround-四周边框，none-无边框，bottom-底部边框
+    customStyle: '', //自定义样式
+    fill: true //组件是否铺满父容器
+  }
+};
+
+export { textareaOptions, textareaTypeList };

package/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import 'uv-ui/es/style.css';
+
+createApp(App).use(ElementPlus).mount('#app');