<template>
    <base-container>
        <h1>CSS Init,重置css默认样式，重置css默认浏览器样式等各种场景</h1>
        <el-card header="initial，将css属性恢复到默认值">
            <div class="mb-5">
                <el-button
                    type="primary"
                    @click="toggleTextLineHeight('text-line-2')"
                    >2倍行高</el-button
                >
                <el-button
                    type="primary"
                    @click="toggleTextLineHeight('text-line-3')"
                    >3倍行高</el-button
                >
                <el-button
                    type="primary"
                    @click="toggleTextLineHeight('text-line')"
                    >默认行高</el-button
                >
            </div>
            <!-- 这是一篇演示文章-->
            <div :class="textLineHeightClass">
                余幼时即嗜学。家贫，无从致书以观，每假借于藏书之家，手自笔录，计日以还。天大寒，砚冰坚，手指不可屈伸，弗之怠。录毕，走送之，不敢稍逾约。以是人多以书假余，余因得遍观群书。既加冠，益慕圣贤之道
                。又患无硕师名人与游，尝趋百里外，从乡之先达执经叩问。先达德隆望尊，门人弟子填其室，未尝稍降辞色。余立侍左右，援疑质理，俯身倾耳以请；或遇其叱咄，色愈恭，礼愈至，不敢出一言以复；俟其欣悦，则又请焉。故余虽愚，卒获有所闻。
                　　当余之从师也，负箧曳屣行深山巨谷中。穷冬烈风，大雪深数尺，足肤皲裂而不知。至舍，四支僵劲不能动，媵人持汤沃灌，以衾拥覆，久而乃和。寓逆旅，主人日再食，无鲜肥滋味之享。同舍生皆被绮绣，戴朱缨宝饰之帽，腰白玉之环，左佩刀，右备容臭，烨然若神人；余则缊袍敝衣处其间，略无慕艳意，以中有足乐者，不知口体之奉不若人也。盖余之勤且艰若此。今虽耄老，未有所成，犹幸预君子之列，而承天子之宠光，缀公卿之后，日侍坐备顾问，四海亦谬称其氏名，况才之过于余者乎？
                　　今诸生学于太学，县官日有廪稍之供，父母岁有裘葛之遗，无冻馁之患矣；坐大厦之下而诵诗书，无奔走之劳矣；有司业、博士为之师，未有问而不告、求而不得者也；凡所宜有之书，皆集于此，不必若余之手录，假诸人而后见也。其业有不精、德有不成者，非天质之卑，则心不若余之专耳，岂他人之过哉！
                　　东阳马生君则，在太学已二年，流辈甚称其贤。余朝京师，生以乡人子谒余，撰长书以为贽，辞甚畅达。与之论辨，言和而色夷。自谓少时用心于学甚劳，是可谓善学者矣。其将归见其亲也，余故道为学之难以告之。谓余勉乡人以学者，余之志也；诋我夸际遇之盛而骄乡人者，岂知予者哉！
            </div>
        </el-card>
        <el-card header="unset，告诉浏览器，就当我没设置过这个属性，不要恢复默认值">
            <div class="mb-5">
                <el-button
                    type="primary"
                    @click="toggleListClass('init')"
                    >ul li初始化样式</el-button
                >
                <el-button
                    type="primary"
                    @click="toggleListClass('unset')"
                    >unset 恢复未设置之前样式</el-button
                >
            </div>
            <ul :class="listClass">
                <li>第一行</li>
                <li>第二行</li>
                <li>第三行</li>
            </ul>
        </el-card>
        <el-card header="revert，恢复浏览器默认样式">
            <div class="mb-5">
                <el-button type="primary">按钮一</el-button>
                <el-button type="primary">按钮二</el-button>
            </div>
            <div>
                <el-button
                    type="primary"
                    @click="toggleBrowserStyle"
                    :class="browserStyle"
                    >切换浏览器中button的默认样式</el-button
                >
            </div>
        </el-card>
    </base-container>
</template>

<script setup>
import { ref } from 'vue';

const textLineHeightClass = ref('text-line');
const toggleTextLineHeight = (className) => {
    textLineHeightClass.value = className;
};

const listClass = ref('init');
const toggleListClass = (className) => {
    listClass.value = className;
};

const browserStyle = ref('');
const toggleBrowserStyle = () => {
    browserStyle.value = browserStyle.value ? '' : 'revert';
};
</script>

<style lang="scss" scoped>
.base-container {
    height: unset !important;
}
.text-line {
    line-height: initial;
}
.text-line-2 {
    line-height: 200%;
}
.text-line-3 {
    line-height: 300%;
}

.init {
    color: red;
    font-size: 18px;
}
.unset {
    /** 这里的all指应用全部属性 */
    all: unset;
}
.revert {
    all: revert;
}
</style>
