Vue-Vue常用组件/标签（持续更新ing~）

Vue-Vue常用组件

1、@refreshDataList

在 Vue.js 中，@refreshDataList 是一个自定义事件，通常用于通知父组件刷新数据列表。这种模式在子组件需要触发父组件中的某个方法时非常常见。
示例场景
假设你有一个父组件 ParentComponent 和一个子组件 ChildComponent。子组件中有一个按钮，点击按钮时需要通知父组件刷新数据列表。

父组件 (ParentComponent.vue)

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
	ChildComponent
  },
  data() {
	return {
	  dataList: [
		{ id: 1, name: 'Item 1' },
		{ id: 2, name: 'Item 2' },
		// 更多数据...
	  ]
	};
  },
  methods: {
	refreshDataList() {
	  // 这里可以是从 API 获取数据，或者直接更新数据列表
	  this.dataList = [
		{ id: 3, name: 'Item 3' },
		{ id: 4, name: 'Item 4' },
		// 更多数据...
	  ];
	}
  }
};
</script>

子组件

<script>
export default {
  methods: {
	refreshData() {
	  // 触发父组件的 refreshDataList 事件
	  this.$emit('refreshDataList');
	}
  }
};
</script>

解释
父组件:

父组件通过 @refreshDataList="refreshDataList" 监听子组件的 refreshDataList 事件。

当子组件触发 refreshDataList 事件时，父组件的 refreshDataList 方法会被调用，从而更新 dataList。

子组件:

子组件中有一个按钮，点击按钮时会调用 refreshData 方法。

refreshData 方法通过 this.$emit('refreshDataList') 触发 refreshDataList 事件，通知父组件刷新数据列表。

总结
@refreshDataList 是一种常见的父子组件通信方式，子组件通过触发事件来通知父组件执行某些操作。这种方式使得组件之间的职责更加清晰，父组件负责管理数据，子组件负责触发操作。

2、@keyup.enter.native

3、 :picker-options=

<el-date-picker type="date" placeholder="" value-format="yyyy-MM-dd" v-model="dataForm.stockTime"
			:picker-options="{
			  disabledDate: (time) => time.getTime() < new Date(new Date().setHours(0,0,0,0))
			}"

4、el-divider

</el-divider></el-divider>

el-divider 是 Element UI 提供的一个用于分隔内容的组件，常用于在界面上区分不同的区域或内容块。
可以按照需求在分割线内添加内容

5、ve-histogram

是基于Vue和ECharts封装的一个图表组件，专门用于渲染柱状图

6、el-tab-plane

是 Element UI 框架中用于标签页（Tabs）组件的子组件，表示单个标签页的内容。通常与 配合使用，结构如下

7、el-table-column中的fixted= left属性

fixted="left"用于将列固定在左侧，确保在滚动的时候始终可见，适合需要长显的列

8、el-table-column中的show-overflow-tooltip属性

show-overflow-tooltip 是一个常见于前端 UI 框架（如 Element UI）中的属性，主要用于处理文本内容过长时的显示问题。
当设置为 true 时，如果单元格或元素的内容过长被截断或隐藏（通常通过 CSS 的 overflow: hidden 和 text-overflow: ellipsis 实现），鼠标悬停在该内容上时会显示一个工具提示（tooltip），展示完整的内容。

9、el-table-column中数字显示保留到三位小数 (toFixed)

 <el-table-column
		label="数量"
		align="center"
		prop="number"
		width="150"
	  >
		<template slot-scope="scope">
		  {{
			scope.row.number !== null && scope.row.number !== undefined
			  ? parseFloat(scope.row.number).toFixed(3)
			  : ""
		  }}
		</template>
	  </el-table-column>

10、table-column 固定像素大小 超出部分显示... 用show-overflow-tooltip

  <el-table-column
		label=""
		align="center"
		prop=""
		width="350px"
		show-overflow-tooltip
	  />

11、穿梭框 el_transfer

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>el-transfer 穿梭框</title>
  <!-- Vue + ElementUI 依赖 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div id="app" style="padding: 30px;">
	<!-- 正确写法：不能加 HTML 注释在标签内！ -->
	<el-transfer
	  v-model="selectedIds"
	  :data="list"
	  :titles="['待选列表', '已选列表']"
	  width="200"
	>
	</el-transfer>
  </div>

  <script>
	new Vue({
	  el: '#app',
	  data() {
		return {
		  selectedIds: [2, 3],
		  list: [
			{ id: 1, label: '苹果' },
			{ id: 2, label: '香蕉' },
			{ id: 3, label: '橙子' },
			{ id: 4, label: '葡萄' },
			{ id: 5, label: '西瓜' }
		  ]
		}
	  }
	})
  </script>
</body>
</html>

image

12、获取字符串首字母拼音 import Pinyin from 'js-pinyin'

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>汉字转拼音 Demo</title>
  <style>
	body { max-width: 600px; margin: 30px auto; font-size: 16px; }
	input { width: 100%; padding: 10px; margin: 10px 0; font-size: 16px; }
	.result { padding: 12px; background: #f5f5f5; border-radius: 6px; margin-top: 10px; }
  </style>
</head>
<body>
  <h2>汉字转拼音工具</h2>
  <input type="text" id="inputText" placeholder="输入汉字" value="我爱编程">
  <div class="result">
	完整拼音：<span id="pinyinFull" style="color:#007bff">wo ai bian cheng</span><br>
	首字母：<span id="pinyinInitial" style="color:#007bff">wabc</span>
  </div>

<script src="https://cdn.bootcdn.net/ajax/libs/pinyin-pro/3.18.1/index.browser.min.js"></script>
<script>
  const input = document.getElementById('inputText')
  const fullEl = document.getElementById('pinyinFull')
  const initialEl = document.getElementById('pinyinInitial')

  function convert() {
	const text = input.value.trim()
	if(!text) { fullEl.textContent=''; initialEl.textContent=''; return; }

	try {
	  const full = pinyinPro.pinyin(text, { toneType:'none' })
	  const initial = pinyinPro.pinyin(text, { pattern:'first', toneType:'none' }).replace(/\s/g,'')
	  fullEl.textContent = full
	  initialEl.textContent = initial
	}catch(e){
	  fullEl.textContent = "加载中…"
	  initialEl.textContent = "加载中…"
	}
  }

  window.onload = function(){
	convert()
	input.addEventListener('input', convert)
  }
</script>
</body>
</html>

image

13、remote-method 与 select-method 区别

这两个是 Element UI 中 el-select 下拉框 的核心方法，用途完全不同，先一句话总结区别：
核心区别详解

  1. remote-method（远程搜索方法）
    必须配合 :remote="true" 使用
    入参：输入框的关键词（query）
    做什么：根据输入内容从后端拉取下拉选项
    场景：数据量很大（几百上千条），不能一次性加载所有选项
  2. @change（select-method 选中事件）
    不需要远程搜索也能使用
    入参：当前选中的 value 值
    做什么：选中选项后执行业务逻辑
    场景：选中后获取详情、联动其他下拉、发送请求等
特性 remote-method select-method
作用 远程搜索加载选项（输入关键词，从接口查下拉数据） 选中项触发事件（点击选中某个选项后执行逻辑）
触发时机 输入框输入内容、清空、聚焦时 点击选中下拉选项时
核心用途 动态加载远程下拉数据 监听选中结果，做后续业务处理
绑定方式 方法绑定（:remote-method） 事件绑定（@change）****
posted @ 2025-03-04 17:13  skystrivegao  阅读(133)  评论(0)    收藏  举报