欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?element?ui用戶展示頁面的實例

 更新時間：2023年05月12日 10:04:49   作者：jackzjbaby  
這篇文章主要介紹了Vue?element?ui用戶展示頁面的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue element ui用戶展示頁面

頁面展示

代碼如下：

<template>
  <div>
    <div class="alluser">
      <div class="head">
        <h3>推薦媒體用戶</h3>
        <div class="headsearch">
          <el-input placeholder="請輸入想要搜索的媒體用戶" v-model="searchUser">
            <i
              slot="suffix"
              style="cursor: pointer"
              class="el-input__icon el-icon-search"
              @click="selUser"
            ></i>
          </el-input>
        </div>
      </div>
      <div class="user-card">
        <div class="user-card-in animate__animated animate__zoomInUp" v-for="(item, index) in userData">
          <div class="user-card-one">
            <div>
              <img v-image-preview class="user-card-image" :src="item.avatar" />
            </div>
            <div
              style="display: block; width: 150px; cursor: pointer"
              @click="personal(item.id)"
            >
              <div class="user-card-title">
                <span class="user-card-name">{{ item.nickname }}</span>
              </div>
              <div class="user-card-v" v-if="item.v === 3">
                <img src="@/assets/img/V.png" class="user-card-v-img" />
                <span class="user-card-v-font">優(yōu)質(zhì)媒體作者</span>
              </div>
              <div class="user-card-sign">
                <span class="user-card-signfont">{{ item.design }}</span>
              </div>
            </div>
            <div class="user-card-button">
              <el-button
                v-if="$store.state.account !== item.account"
                @click="follow(item.id)"
                type="primary"
                size="medium"
                round
                icon="el-icon-check"
                v-text="isfollowid.indexOf(item.id) > -1 ? '已關(guān)注' : '關(guān)注'"
              ></el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "AllUser",
  data() {
    return {
      isfollow: true,//是否關(guān)注
      searchUser: "",//搜索框輸入
      userData: [],//數(shù)據(jù).....可先把下面的json數(shù)據(jù)放在這里看效果
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {},//頁面數(shù)據(jù)加載
    selUser() {},//搜索觸發(fā)事件
    follow(id) {},//關(guān)注觸發(fā)事件
    personal(id) {
      this.$router.push({ path: `/newsuser/personal/${id}` });//進入他人頁面
    },
  },
};
</script>
<style>
.alluser {
  position: relative;
  margin-top: 20px;
  width: 70%;
  min-height: calc(100vh - 70px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background-color: white;
  padding: 20px;
}
.head {
  width: 100%;
  height: 35px;
  border-bottom: 3px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
}
h3 {
  margin-left: 20px;
  line-height: 20px;
  font-size: 16px;
  font-weight: 600;
}
.headsearch {
  margin-top: -10px;
}
.user-card {
  display: flex;
  width: 100%;
  /* height: calc(100vh - 105px); */
  flex-wrap: wrap;
}
.user-card :hover {
  border-width: 1px;
  border-color: deepskyblue;
}
.user-card-in {
  margin: 30px 20px auto 20px;
  height: 110px;
  width: 45%;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  -webkit-transition: 0.2s border-color;
  -o-transition: 0.2s border-color;
  transition: 0.2s border-color;
  /* display: flex; */
}
.user-card-one {
  display: flex;
}
.user-card-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #ebebeb;
  vertical-align: top;
  margin: 20px;
  width: 80px;
  height: 80px;
  cursor: pointer;
}
.user-card-title {
  margin-left: 5px;
  margin-top: 25px;
  font-size: 10;
  line-height: 14px;
  cursor: pointer;
}
.user-card-title :hover {
  color: deepskyblue;
}
.user-card-name {
  color: #666;
  max-width: 180px;
}
.user-card-v {
  margin-top: 10px;
  margin-bottom: -15px;
}
.user-card-v-img {
  width: 15px;
  height: 15px;
}
.user-card-v-font {
  font-size: 16px;
  color: #00c3ff;
}
.user-card-sign {
  margin-left: 5px;
  margin-top: 20px;
  cursor: pointer;
}
.user-card-sign :hover {
  color: deepskyblue;
}
.user-card-signfont {
  line-height: 14px;
  color: #999;
  margin-top: 5px;
}
.user-card-button {
  margin-top: 35px;
  margin-left: 100px;
}
</style>

JSON數(shù)據(jù)如下：

[
    {
        "id": "1",
        "account": "admin",
        "admin": 1,
        "avatar": "http://raqxgs139.hn-bkt.clouddn.com/43e0c9b7-113f-4fe5-9a86-363ff4164e5c.jpeg",
        "createDate": 20210622223122,
        "deleted": 0,
        "email": "11",
        "lastLogin": 20210630223130,
        "mobilePhoneNumber": "12",
        "nickname": "哪吒",
        "password": "9b80475ad0cdda5e6ef9cf257dd5a77a",
        "salt": "12",
        "status": 1,
        "area": "廣東",
        "work": "程序猿",
        "sex": 1,
        "design": "不可一世",
        "age": 25,
        "hobby": "打臺球",
        "followCounts": 1,
        "fanCounts": 2,
        "goodCounts": 5,
        "v": 3
    },
    {
        "id": "1486255021039099905",
        "account": "jack",
        "admin": 1,
        "avatar": "http://raqxgs139.hn-bkt.clouddn.com/4fe604d2-63e7-4163-a437-0ee6feb0f689.jpg",
        "createDate": 1643185784952,
        "deleted": 0,
        "email": "4506289653@qq.com",
        "lastLogin": 1643185784952,
        "mobilePhoneNumber": "14242424247",
        "nickname": "jack",
        "password": "1d01d52c40f4ff57ad3f93a06daf21d5",
        "salt": "",
        "status": 0,
        "area": "江西",
        "work": "務(wù)農(nóng)",
        "sex": 1,
        "design": "相見恨晚",
        "age": 43,
        "hobby": "打乒乓球",
        "followCounts": 4,
        "fanCounts": 3,
        "goodCounts": 1,
        "v": 3
    },
    {
        "id": "1517521770570059778",
        "account": "狐貍",
        "admin": 0,
        "avatar": "http://raqxgs139.hn-bkt.clouddn.com/8c1558c0-77a1-447f-beab-92dd68f7cf73.jpeg",
        "createDate": 1554667565000,
        "deleted": 0,
        "email": "1234567890@qq.com",
        "lastLogin": 1650640266000,
        "mobilePhoneNumber": "2323232333",
        "nickname": "啊財",
        "password": "25d55ad283aa400af464c76d713c07ad",
        "salt": null,
        "status": 0,
        "area": "阿剌淑",
        "work": "程序員",
        "sex": 0,
        "design": "黃鼠狼給雞拜年",
        "age": 15,
        "hobby": "跑步",
        "followCounts": 0,
        "fanCounts": 0,
        "goodCounts": 0,
        "v": 3
    },
    {
        "id": "1517692330080022530",
        "account": "xiaomei",
        "admin": 0,
        "avatar": "http://raqxgs139.hn-bkt.clouddn.com/dd7080db-163e-4a8b-b5cd-8631f1077971.jpeg",
        "createDate": 1586188800000,
        "deleted": 0,
        "email": "322332444@qq.com",
        "lastLogin": 1649865600000,
        "mobilePhoneNumber": "2322332423",
        "nickname": "小美",
        "password": "3116e5c549a362a3388e0bf31b04c749",
        "salt": null,
        "status": 0,
        "area": "美國",
        "work": "畫手",
        "sex": 0,
        "design": "畫手一枚，請多指教?(???ω???)?",
        "age": 23,
        "hobby": "畫畫",
        "followCounts": 0,
        "fanCounts": 0,
        "goodCounts": 0,
        "v": 3
    },
    {
        "id": "1517697998707044354",
        "account": "keli",
        "admin": 0,
        "avatar": "http://raqxgs139.hn-bkt.clouddn.com/0b387f48-a7db-4cb5-8dcd-f356764d7afe.jpg",
        "createDate": 1649001600000,
        "deleted": 0,
        "email": "4869893525@qq.com",
        "lastLogin": 1649174400000,
        "mobilePhoneNumber": "54467765565",
        "nickname": "可莉",
        "password": "d993d3708f492387653a84a2927d7afc",
        "salt": null,
        "status": 1,
        "area": "提瓦格",
        "work": null,
        "sex": 0,
        "design": "放火",
        "age": 7,
        "hobby": "放火",
        "followCounts": 0,
        "fanCounts": 1,
        "goodCounts": 0,
        "v": 3
    },
     {
        "id": "1404446129264832513",
        "account": "刻晴",
        "admin": 1,
        "avatar": "http://raqxgs139.hn-bkt.clouddn.com/e576670d-29a6-4737-a620-d74adcb77f46.webp",
        "createDate": 1623681025218,
        "deleted": 0,
        "email": "2231475623@qq.com",
        "lastLogin": 1623681025218,
        "mobilePhoneNumber": "32323232444",
        "nickname": "刻晴",
        "password": "f48c62c61c2f0e4fb05804f510519fe4",
        "salt": "",
        "status": 0,
        "area": "上海",
        "work": "程序猿",
        "sex": 0,
        "design": "永不放棄",
        "age": 21,
        "hobby": "打籃球",
        "followCounts": 1,
        "fanCounts": 1,
        "goodCounts": 0,
        "v": 1
    },
    {
        "id": "1404448463944462338",
        "account": "12213",
        "admin": 1,
        "avatar": "http://raqxgs139.hn-bkt.clouddn.com/0db2abbc-80e2-49fa-97b7-e79fa649bf92.jpeg",
        "createDate": 1623681581855,
        "deleted": 0,
        "email": "4506289653@qq.com",
        "lastLogin": 1623681581855,
        "mobilePhoneNumber": "45434332323",
        "nickname": "巫師",
        "password": "afa7fb9b029e524d2df9fd53486fe0f3",
        "salt": "",
        "status": 0,
        "area": "廣東",
        "work": "程序猿",
        "sex": 0,
        "design": "愛愛啊愛愛啊",
        "age": 34,
        "hobby": "打籃球",
        "followCounts": 0,
        "fanCounts": 0,
        "goodCounts": 0,
        "v": 1
    },
    {
        "id": "1404448588146192386",
        "account": "123",
        "admin": 1,
        "avatar": "http://raqxgs139.hn-bkt.clouddn.com/6351b076-bbb2-4733-aa9a-8b311e73518a.jpeg",
        "createDate": 1623681611474,
        "deleted": 0,
        "email": "5623478903@qq.com",
        "lastLogin": 1623681611474,
        "mobilePhoneNumber": "12543669872",
        "nickname": "123",
        "password": "15b447ee18a869d7c2946c51c1a75e11",
        "salt": "",
        "status": 0,
        "area": "福建",
        "work": "務(wù)農(nóng)",
        "sex": 0,
        "design": "不可一世",
        "age": 18,
        "hobby": "打羽毛球",
        "followCounts": 2,
        "fanCounts": 0,
        "goodCounts": 0,
        "v": 1
    }
    ]

該處為測試請求的數(shù)據(jù)。

vue中Element ui不生效

原因是我用的vue3不支持element ui 要使用element plus

使用命令安裝

npm install element-plus --save

安裝完之后在main.js中編輯

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount(‘#app')

即可生效

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • 解決vue-cli + webpack 新建項目出錯的問題

    解決vue-cli + webpack 新建項目出錯的問題

    下面小編就為大家分享一篇解決vue-cli + webpack 新建項目出錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue組件中實現(xiàn)嵌套子組件案例

    vue組件中實現(xiàn)嵌套子組件案例

    這篇文章主要介紹了vue組件中實現(xiàn)嵌套子組件案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue使用AES.js的步驟詳解

    vue使用AES.js的步驟詳解

    AES對數(shù)據(jù)傳輸加密、解密處理---AES.js，下面分步驟給大家介紹vue使用AES.js的示例代碼，感興趣的朋友跟隨小編一起看看吧
    2021-10-10
  • Vue?監(jiān)視屬性之天氣案例實現(xiàn)

    Vue?監(jiān)視屬性之天氣案例實現(xiàn)

    這篇文章主要介紹了Vue?監(jiān)視屬性之天氣案例實現(xiàn)，文章以天氣為例展開介紹Vue?監(jiān)視屬性?的相關(guān)內(nèi)容，需要的小伙伴可以參考一下
    2022-05-05
  • VUE組件中的 Drawer 抽屜實現(xiàn)代碼

    VUE組件中的 Drawer 抽屜實現(xiàn)代碼

    這篇文章主要介紹了VUE組件 之 Drawer 抽屜 ，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08
  • 詳解mpvue scroll-view自動回彈bug解決方案

    詳解mpvue scroll-view自動回彈bug解決方案

    設(shè)置了scroll-top的scroll-view組件，在組件所在vue實例data發(fā)生改變時會自動回彈到最上方，非常具有實用價值，需要的朋友可以參考下
    2018-10-10
  • 詳解Vue3 Teleport 的實踐及原理

    詳解Vue3 Teleport 的實踐及原理

    這篇文章主要介紹了Vue3 Teleport 組件的實踐及原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-12-12
  • vue3無法使用jsx的問題及解決

    vue3無法使用jsx的問題及解決

    這篇文章主要介紹了vue3無法使用jsx的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • Vue通過input篩選數(shù)據(jù)

    Vue通過input篩選數(shù)據(jù)

    這篇文章主要為大家詳細介紹了Vue通過input篩選數(shù)據(jù)的相關(guān)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-05-05
  • Vue實現(xiàn)table上下移動功能示例

    Vue實現(xiàn)table上下移動功能示例

    這篇文章主要介紹了Vue實現(xiàn)table上下移動功能,結(jié)合實例形式分析了vue.js針對table表格元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
    2019-02-02

最新評論