buUI- 一個Vue UI 元件

阿新 • • 發佈：2020-12-22

技術標籤：buUI- 一個Vue UI 元件 vue js html javascript css

buUI - 一個Vue UI 元件

作者：大補

安裝

使用本框架前，請在CSS中開啟 border-box

*{box-sizing: border-box;}

Button 元件

在這裡插入圖片描述
按鈕元件 Button.vue 單檔案元件。

<template>
    <button class="g-button">按鈕</button>
</template>

<script>
export default {};
</script>

<style lang="scss">
.g-button {
  font-size: var(--font-size);
  height: var(--button-height);
  padding: 0 1em;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background: var(--button-bg);
  &:hover {
    border-color: var(--border-color-hover);
  }

  &:active {
    background-color: var(--button-active-bg);
  }

  &:focus {
    outline: none;
  }
}
</style>

新建一個app.js

import Vue from 'vue';
import Button from './button.vue';
Vue.component('g-button', Button) //全域性元件
new Vue({
    el: '#app',
})

新建一個index.html 引入 app.js 檔案

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name 
="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
     :root {
        --button-height: 32px;
        --font-size 
: 14px;
        --button-bg: white;
        --button-active-bg: #eee;
        --border-radius: 4px;
        --color: #333;
        --border-color: #999;
        --border-color-hover: #666;
    }
</style>
<style>
    #app {
        margin: 20px;
    }
</style>

<body>
    <div id="app">
        <g-button></g-button>
    </div>
</body>
<script src="./src/app.js"></script>

</html>

buUI- 一個Vue UI 元件

技術標籤：buUI- 一個Vue UI 元件vuejshtmljavascriptcss buUI - 一個Vue UI 元件作者：大補

el select預設選中第一個_element-ui 元件el-table預設選中行setCurrentRow採坑記

技術標籤：el select預設選中第一個 1.背景選中表格中某一行，高亮顯示，table表格資料變化後（刪除某幾條資料，不包括選中的刪除）， this.$refs.multipleTable.setCurrentRow(row),選中之前選中的行，可

vue element-ui封裝一個hover提示元件

<template> <div class="info"> <span>{{ label }}</span> <el-tooltip effect="dark" placement="top">

使用vue實現一個電子簽名元件的示例程式碼

在生活中我們使用到電子簽名最多的地方可能就是銀行了，每次都會讓你留下大名。今天我們就要用vue實現一個電子簽名的面板

vue從零實現一個訊息通知元件的方法詳解

本文例項講述了vue從零實現一個訊息通知元件的方法。分享給大家供大家參考，具體如下：

一篇文章帶你使用Typescript封裝一個Vue元件(簡單易懂)

一、搭建專案以及初始化配置 vue create ts_vue_btn 這裡使用了vue CLI3自定義選擇的服務，我選擇了ts、stylus等工具。然後建立完專案之後，進入專案。使用快捷命令code .進入Vs code編輯器(如果沒有code .，需要

手把手從零開始---封裝一個vue視訊播放器元件

現在，在網頁上播放視訊已經越來越流行，但是網上的資料魚龍混雜，很難找到自己想要的，今天小編就自己的親身開發體驗，手把手從零開始---封裝一個vue視訊播放器元件。

封裝一個VUE時間線元件

之前開發網站的時候，有一個品牌歷程的展示，拿到UI後，因為前期著急所以時間線直接用的圖片，這樣做的話後期在後臺增加品牌歷程的時候，還需要前臺更換圖片，比較麻煩，所以空閒的時候自己封裝了一個。最終效果圖如

解決vue加scoped後就無法修改vant的UI元件的樣式問題

有時候UI元件提供的預設的樣式不能滿足專案的需要，就需要我們對它的樣式進行修改，但是發現加了scoped後修改的樣式不起作用。

vue中元件的data為什麼是一個函式

提出問題：元件的data資料為什麼必須要以函式返回的形式，為什麼不是簡單的物件形式呢？

Vue中正確使用Element-UI元件的方法例項

一、CDN 目前可以通過 unpkg.com/element-ui 獲取到最新版本的資源，在頁面上引入 js 和 css 檔案即可開始使用。

【轉】前端筆記之Vue（四）UI元件庫&Vuex&虛擬伺服器初識

【轉】前端筆記之Vue（四）UI元件庫&Vuex&虛擬伺服器初識一、日曆元件

vue 倒計時元件（可利用element ui 的 Slider 滑塊元件選擇倒計時的時間）

首先需要在vue專案中安裝element UI npm i element-ui -S 在 main.js 中寫入以下內容： import ElementUI from \'element-ui\';

vuex + element-ui 實現一個vue的Todolist

前言前兩天覆習了一下vuex，想著做一個todolist實踐下知識點，於是結合餓了麼的熱門ui框架element寫了這個demo。文章內容較長，如果對vuex和elementui比較熟悉，可以直接看原始碼，互動步驟並不複雜，算是一個入門級

如何寫好一個vue元件

技術標籤：vuepythonjavajavascriptjs 轉自：https://www.cnblogs.com/pengchenggang/p/10880437.html

寫一個vue元件庫_跟著element學習寫元件

如何使用vue寫一個元件庫元件以外掛的形式引入使用，當然，也可以直接在頁面引入元件檔案，兩者按需使用。

element-ui封裝一個Table模板元件的示例

大家在做後臺管理系統的時候，寫的最多的可能就是表格頁面了，一般分三部分：搜尋功能區、表格內容區和分頁器區。一般這些功能都是使用第三方元件庫實現，比如說element-ui，或者vuetify。這兩個元件庫都各有各的優點

vue 一個元件內多個彈窗_一個 Vue 模板可以有多個根節點(Fragments)?

技術標籤：vue 一個元件內多個彈窗如果我們試圖建立一個沒有根節點的Vue模板，比如這樣：

使用Vue的render渲染函式封裝UI元件的思路（一）

技術標籤：web前端javascriptvue.jshtml5css3es6 使用Vue的render渲染函式封裝UI元件的思路（一）

vue實現一個單檔案元件的完整過程記錄

前言前端開發人員只要瞭解過.框架可能都知道單檔案元件。vue.js中的單檔案元件允許在一個檔案中定義一個元件的所有內容。這是一個非常有用的解決方案，在瀏覽器中已經開始提倡這種機制。但是不幸的是，這個概念自從

buUI- 一個Vue UI 元件

buUI - 一個Vue UI 元件

安裝

Button 元件

相關推薦