React Icon反转

    1. /**
    2.  * @author leesin
    3.  * @date 2022-03-21 23:55:07
    4.  * @desc icon
    5.  */
    6. import React, { useEffect, useState, FC } from 'react';
    7. import { Tooltip } from 'antd';
    8. import { UpOutlined } from '@ant-design/icons';
    9. import $ from './style.less';
    11. interface Props {
    12.   data?: object;
    13. }
    14. /** 搜索 */
    15. const IndexSearch: FC<Props> = (props) => {
    16.   const [icon, setIcon] = useState(false);
    17.   useEffect(() => {}, []);
    18.   const test = {
    19.     0: {
    20.       title: '展开',
    21.     },
    22.     1: {
    23.       title: '收起',
    24.     },
    25.   };
    26.   const handleTest = () => {
    27.     setIcon(!icon);
    28.   };
    29.   return (
    30.     <div className="index">
    31.       <Tooltip title={test[+icon].title}>
    32.         <UpOutlined className={$.test} data-type={icon} onClick={handleTest} />
    33.       </Tooltip>
    34.     </div>
    35.   );
    36. };
    37. export default IndexSearch;
    1. .test {
    2.   &[data-type='true'] {
    3.     transform: rotate(0deg);
    4.     transition: 0.5s all linear;
    5.   }
    6.   &[data-type='false'] {
    7.     transform: rotate(-180deg);
    8.     transition: 0.5s all linear;
    9.   }
    10. }

    Vue Icon反转

    1. <script>
    2. /**
    3.  * @author leesin
    4.  * @date 2022-03-10 10:10:01
    5.  * @desc
    6.  */
    7. export default {
    8.   name: "basicConfigInfo",
    9.   components: {},
    10.   props: {},
    11.   data() {
    12.     return {
    13.       icon: false,
    14.       iconStatus: {
    15.         a: {
    16.           title: "展开",
    17.         },
    18.         1: {
    19.           title: "收起",
    20.         },
    21.       },
    22.     };
    23.   },
    24.   watch: {},
    25.   methods: {
    26.     handleSetIcon() {
    27.       this.icon = !this.icon;
    28.     },
    29.   },
    30.   mounted() {},
    31.   computed: {},
    32.   render() {
    33.     return (
    34.       <div class="basicConfigInfo">
    35.         <a-tooltip title={this.iconStatus[+this.icon].title}>
    36.           <a-icon
    37.             type="up"
    38.             class="icon"
    39.             data-type={`${this.icon}`}
    40.             onClick={this.handleSetIcon}
    41.           />
    42.         </a-tooltip>
    43.       </div>
    44.     );
    45.   },
    46. };
    47. </script>
    48. <style lang="less" scoped>
    49. .icon {
    50.   &[data-type="true"] {
    51.     transform: rotate(0deg);
    52.     transition: 0.3s all linear;
    53.   }
    54.   &[data-type="false"] {
    55.     transform: rotate(180deg);
    56.     transition: 0.3s all linear;
    57.   }
    58. }
    59. </style>