人生在於折騰，**也在於折騰，再折騰中進步，再折騰中尋找更好的方法
最近在開發專案中遇到乙個帶動畫效果的手風琴摺疊面板，看了element-ui的摺疊面板，發現並不適用於自己的專案，於是乎就決定自己搞乙個，說幹就幹，把我搞得過程記錄下來，一方面方便自己學習，記錄，一方面幫助大家。有什麼錯誤的地方或者寫的不好的地方請多多指正。
element-ui 摺疊面板效果圖
話不多說，先上**。
1,第一步，先新建乙個accordion.vue檔案用來存放你的元件。
="accordion"
>
<
!-- accordion title --
>
="accordiontitle"
>
="accordiontitlel lefttext"
v-text=
"accordiondata"
v-show=
"isslotsecond != 2"
>
<
/div>
="accordiontitlel lefttext"
v-show=
"isslotsecond == 2"
>
"second"
>
<
/slot>
<
/div>
="clickarea"
@click=
"shrink"
>
="accordiontitler lefttext"
v-text=
"rightcontent"
>
<
/div>
<
/div>
<
/div>
<
!-- accordion body --
>
="accordionbody"
ref=
"accordionbody"
>
<
!-- 接受slot的容器 --
>
<
!-- 這裡我才用slot的方法把手風琴內的內容外掛程式裡，以方便控制，達到靈活的效果 --
>
="contenta"
>
"first"
>
<
/slot>
="isshrink" v-show=
"isshrink"
>
<
/p>
<
/div>
<
/div>
<
/div>
<
/template>
/** * accordionindex 控制某乙個展開收縮
* accordiondata 左上角標題的文字
* isslotsecond 決定顯示那個插槽 first or second
* 這樣的好處可以實現多個共存
*/export
default;}
, methods:
else},
1);}
}};<
/script>
.accordion
.accordiontitle
/* 動畫效果採用css3來實現 */
.accordionbody
.accordiontitlel
.accordiontitler
.lefttext
.clickarea
.isshrink
/* 後期如果有修改樣式的需求，直接在你的引用頁面修改就好 */
<
/style>
2.第二步，新建乙個index.vue檔案來引用你的元件
="fundmangerdetail"
>
="basebox w100 bgcw mt20"
>
<
!-- 引用你的元件 --
>
="rightfixed0"
:accordionindex=
"0":isslotsecond=
"0":accordiondata=
"baseinformation"
>
="baseinformation"
slot=
"first"
>
<
!-- 放入你要插入到內容 --
>
<
/baseinformation>
<
/div>
<
/accordion>
<
!-- 乙個頁面中可以i寫多個 --
>
<
/div>
<
/div>
<
/template>
import accordion from
"@/components/accordion/index"
;import baseinformation from
"./models/baseinformation"
;export
default
,data()
;},mounted()
, methods:};
<
/script>
uniapp摺疊面板
uniaap摺疊面板官網位址 一般用法 change 標題文字 標題文字 thumb uni list item 標題文字 note 描述資訊 thumb uni list item 標題文字 note 描述資訊 show extra icon true extra icon uni list it...
文字摺疊效果
人的志向通常和他們的能力成正比例。詹森 建乙個div盒子讓其旋轉一定角度，使其有一定的傾斜效果 通過雙偽元素建兩個相同的樣式，通過clip path屬性分別擷取上半部分和下半部分，並定位使其與原div盒子層疊 新增滑鼠移入效果，通過一定的旋轉和傾斜來實現摺疊時的效果 乙個div盒子在底層不動，讓偽元...
DataList實現摺疊效果
先看圖 這個功能可以用後台管理中 區域的繫結，商品大類，商品小類，商品資訊的管理 實現原理如下 先建設乙個資料表如 高校欄目表 截圖如下 parentid儲存父id的節點，childid儲存子id的節點，如果某一行中的parentid不為空，子節點為空，說明此行為父節點 而子節點的parentid對...